浮动

标准文档流组成
块级元素（block）

…

、

、

、列表
内联元素（inline）
、、、…
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display属性
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示

display特性
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

使用什么属性使块元素排在一行？
inline-block
float

layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？
浮动元素脱离标准文档流
清除浮动

clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
浮动元素后面加空div

overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

解决父级边框塌陷：父级添加伪类after

清除浮动，防止父级边框塌陷的四种方法
浮动元素后面加空div
简单，空div会造成HTML代码冗余
设置父元素的高度
简单，元素固定高会降低扩展性
父级添加overflow属性
简单，下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用