第四章：理解浮动

何为浮动？

浮动就是将一个元素拉到其容器的一侧，这样文档流就能够包围他，如下图所示

浮动元素会被移出正常文档流，并被拉到容器边缘。文档流会重新排列，但是它会包围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列，如图所示。

浮动带来的问题

容器折叠

浮动元素的高度不会被加在父容器上面

清除浮动

一个解决办法就是使用clear属性。将一个元素放在父容器的末尾，并对他使用clear，这样容器就会扩展到浮动元素的下面

.clearfix::after{
clear:both;
display:table
}

在清除浮动时使用display: table能够包含外边距，是因为利用了CSS的一些特性。创建一个display: table元素（或者是本例的伪元素），也就在元素内隐式创建了一个表格行和一个单元格。因为外边距无法通过单元格元素折叠，所以也无法通过设置了display: table的伪元素折叠。看起来似乎使用display: table-cell也能达到相同的效果，但是clear属性只能对块级元素生效。表格是块级元素，但是单元格并不是。因此，clear属性无法跟display:table-cell一起使用。所以要用display: table来清除浮动，同时利用隐式创建单元格来包含外边距。

BFC容器（块级格式化上下文（blockformatting context, BFC））

第二种解决办法就是将主容器变为BFC容器,就是设置主容器的overflow为auto;
BFC是网页的一块区域，元素基于这块区域布局。虽然BFC本身是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开。这种隔离为创建BFC的元素做出了以下3件事情。
(1) 包含了内部所有元素的上下外边距。它们不会跟BFC外面的元素产生外边距折叠。
(2) 包含了内部所有的浮动元素。（这一条就是来解决容器重叠的问题）
(3) 不会跟BFC外面的浮动元素重叠。
给元素添加以下的任意属性值都会创建BFC。

• float: left或right，不为none即可。
• overflow:hidden、auto或scroll，不为visible即可。❑
• display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。拥有这些属性的元素称为块级容器（block container）。
• position:absolute或position: fixed。

使用浮动或者inline-block方式创建BFC的元素宽度会变成100%，因此需要限制一下元素的宽度，防止因为过宽而换行，导致内容移动到浮动图片的下面。相反，使用table-cell方式显示的元素，其宽度只会刚好容纳其中的内容，因此需要设置一个较大的宽度，强制使其填满剩余空间。