CSS 浮动布局

在说浮动之前，我们先来了解一下标准流。

• 标准流又称为普通流，是浏览器默认的排版方式。
• 标准流中元素会自动按照从左往右从上往下进行排列。

浮动 float

什么是浮动？

使元素脱离了标准流，向左或向又移动，直到碰到父元素或另一个浮动元素的边缘为止。

最初，引入float属性是为了能让Web开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面看到过。

让盒子浮动起来

.son1{
    float:left;
} //设置class为son1的盒子向左浮动

参数

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

特性

1. 加了浮动的元素盒子是“浮起来”的，脱离了标准流，漂浮在其他标准盒子上，原来的位置空了下来，漏给了标准流盒子

2. 浮动元素具有行内块元素特性

   1. 任何元素都可以浮动，不管之前是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。
   2. 元素设置浮动后，原来设置的宽高起作用，默认在当前包含块左上一排，如果前面有块级元素，会排在元素的下面。

3. 如果原来没有设置宽高，浮动后根据内容决定大小

3. 浮动的元素是相互贴靠在一起的(没有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

4. 浮动元素不会遮挡标准流中的文字。

清除浮动

我们发现，一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也收到浮动元素的影响，我们需要清除浮动

• 清除浮动的本质是清除浮动造成的影响

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

• 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题

清除浮动的方法

1. 额外标签法

2. 父级添加overflow属性

3. 父级添加after伪元素

4. 父级添加双伪元素