浮动
浮动的设计初衷
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. 避免文档流围绕浮动元素排列