CSS布局之浮动布局

布局(layout),指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右、从上到下。改变元素的默认布局方式有很多种，浮动(float)就是其中一种。

1. 浮动(float)

浮动类似于word里面文字围绕图片的效果，可设置为向左(left)或向右(right)浮动。

// 元素默认没有浮动效果
float: none;
// 向左浮动
float: left;
// 向右浮动
float: right;

1.1 浮动元素的盒模型

普通元素有文档流(即上面提到的默认布局)，浮动元素页游浮动流，即浮动元素会跟随浮动元素浮动。

// 1.宽度和高度
浮动元素的宽高由内容撑开
// 2.内边距
浮动元素可正常设置内边距
// 3.边框
浮动元素可正常设置边框
// 4. 外边距
浮动元素可正常设置外边距，且外边距不会重叠。

1.1 包含块的包裹性

距浮动元素最近的块级元素称为包含块，浮动元素不会超出包含快的上、右、左边界，但可以超出元素的下边界。

// 包含块也浮动时，包含块的宽度和高度由子元素撑开

想让浮动元素超出父元素边界有2中办法：1.浮动元素宽度大于父元素宽度；2. 浮动元素设置负外边距，但会与其他正常元素重叠。

// 如果浮动元素设置负外边距，与其他元素重叠时会有如下情况：

// 1. 浮动元素与行内元素重叠：
行内元素的边框、背景和内容，都在浮动元素之上
// 2. 浮动元素与块级元素重叠
块级元素的边框、背景在浮动元素之下，内容在浮动元素之上

1.3 浮动元素的破坏性

浮动元素会造成父元素的高度塌陷，即当只有1个浮动元素且父元素未设置高度时，父元素的高度为0；

解决父元素的高度塌陷就要清除浮动，有2种办法：

1.3.1 在浮动元素后，添加新元素并设置clear属性

// 直接设置新元素清除浮动
.clear { clear: both; }
// 使用after伪类
.clear::after { 
    content: '';
    display: block;
    clear: both; 
}

1.3.2 触发包含块的BFC

// 设置float属性为left或right
.fl { float: left; }
// 设置position属性为fixed或absolute
.fx { position: fixed; }
// 设置display属性为inline-block/table-cell/table-caption/flex
.hd { display: flex; }
// 设置overflow属性不为visible
.ov { overflow: hidden; }