浮动布局

浮动布局

一、浮动基础概念

\1. 浮动作用：让块级元素脱离标准文档流，横向并排排列，早期用来做页面多栏布局、导航。

\2. 浮动取值：左浮动、右浮动、不浮动。

\3. 脱离文档流特点：浮动元素不再占据原有页面空间，下方标准流内容会向上填充空位。

二、浮动自带特性

\1. 块级元素浮动后，宽度由内部内容决定，不再默认占满整行。

\2. 行内元素浮动后，可以直接设置宽高，具备块级元素特性。

\3. 文字环绕效果：文字、行内元素不会被浮动盒子遮挡，自动环绕在浮动元素周边。

\4. 浮动只会影响自身及后面的元素，不会改变前面标准流元素位置。

三、高度塌陷问题

\1. 产生原因：父容器没有设置固定高度，内部子元素全部浮动后脱离文档流，父盒子失去内容支撑，高度变为0。

\2. 带来问题：父盒子背景、边框无法正常显示，下方布局整体上移错乱。

四、清除浮动四种方案

\1. 额外空标签清除法
在父容器末尾添加空白块元素，设置清除左右浮动；简单但会增加多余无意义标签。

\2. overflow属性法
给父容器设置溢出隐藏，触发BFC自动包含内部浮动元素；简洁，无法处理子元素超出容器溢出展示的场景。

\3. 伪元素清除法（工作最常用）
给父容器添加after伪元素，模拟空白标签清除浮动，不增加HTML结构，兼容性好。

\4. 双伪元素清除法
同时处理前后浮动，适配老旧浏览器，现在使用较少。

五、清除浮动属性clear