页面布局三大核心之二：浮动

浮动

这篇来复盘一下布局三大哥中的二哥： 浮动。

1. 传统页面布局的三种方式： 标准流、浮动、定位。

2. 浮动和标准流的差别：

   • 标准流：按照规定好的默认方式排列元素
   • 浮动float：脱离标准流，按自己的规则排列

3. 浮动的特性：

   • 脱离标准流，以至于不再保留盒子原来的位置
   • 任何元素都可以进行浮动，且浮动后会具有行内块元素相似的特性，建议如果一个元素浮动，其他的兄弟元素也一起浮动
   • 浮动的元素常和标准流的父级搭配使用

4. 浮动可能会带来的问题： 如果父盒子在一些情况下不方便直接给高度，但是子盒子浮动是不占位置的，无法撑开盒子，父盒子的高度为0，会影响后面的标准流盒子。

5. 清除浮动：clear: both 清除左右两侧浮动影响

   清除浮动后，父级会根据子盒子自动调整高度，就可以解决上述问题了。

6. 具体方法：

   1. 额外标签法：在浮动的元素末尾添加一个空标签
   2. 父元素添加overflow: hidden属性
   3. :after伪元素法：给父元素添加after伪元素并clear
   4. 双伪元素清除浮动：在3的基础上再添加一个:before