共计 840 个字符，预计需要花费 3 分钟才能阅读完成。
浮动
浮动的设计初衷
1、浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就可能突围它（如下图所示）。这种布局在报纸和杂志中很常见，因而 CSS 减少了浮动来实现这种成果。
文本行突围了浮动元素
2、浮动元素会被移出失常文档流，并被拉到容器边缘。文档流会重新排列，然而它会突围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列，
两个浮动元素挨着排列
留神点
1. 动元素不同于一般文档流的元素，它们的高度不会加到父元素上
2. 浮动是为了实现文字围绕浮动元素排列的成果。在段落里浮动图片时，段落的高度并不会增长到可能包容该图片。也就是说，如果图片比段落文字高，下一段会间接从上一段的文字上面开始，两段文字都会围绕浮动的图片排列（下图 1）3. 三个左浮动的盒子：如果盒子 1 比盒子 2 高，则盒子 3 不会浮动到最右边，而是浮动到盒子 1 的左边（下图 2）
下图 1
下图 2
块级格式化上下文（blockformatting context, BFC）
特点
1. 蕴含了外部所有元素的高低外边距。它们不会跟 BFC 里面的元素产生外边距折叠。2. 蕴含了外部所有的浮动元素。3. 不会跟 BFC 里面的浮动元素重叠。简而言之，BFC 里的内容不会跟内部的元素重叠或者相互影响。如果给元素减少 clear 属性，它只会革除本身所在 BFC 内的浮动。如果强制给一个元素生成一个新的 BFC，它不会跟其余 BFC 重叠。
创立 BFC
1. float: left 或 right，不为 none 即可。2. overflow:hidden、auto 或 scroll，不为 visible 即可。3. display:inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid。领有这些属性的元素称为块级容器（block container）。4. position:absolute 或 position: fixed。益处
1. 蕴含浮动元素
2. 避免外边距折叠
3. 避免文档流围绕浮动元素排列 正文完