笔记来源：《CSS设计指南》（第3版）（图灵程序设计丛书）。
浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这种情况有时候并非我们想要的。这里提供三种必须掌握的方法，在具体情况中选择合适的方法来围住浮动元素。
首先摆上实验案例：
section父元素内的span子元素
section父元素内的p子元素
section父元素内的p子元素
现在我们看到的是常规文档流，即块级元素包围着所有子元素，而且在页面中自上而下相互堆叠在一起。假设我们想让p标签的段落内容位于span元素（已通过CSS设定为行内块级元素）的右侧，而不是像现在这样位于下方，我们需要对span元素添加float: left以便将span元素左浮动。
section父元素内的span子元素
section父元素内的p子元素
section父元素内的p子元素
现在span元素的确浮动在了其后p元素的左侧，但是我们也看到了，由于span元素脱离了文本流，父元素section看不到span元素，就根据其内剩下的p元素的高度重新调整自己的高度了（section只包含了非浮动子元素）。section后面的footer元素仍然紧挨着重新调整高度后的section元素，这符合我们的理解，但这不是我们想要的。我们希望footer元素在视觉上仍然位于span内容的下方。怎么办呢？
目录
方法一：为父元素添加overflow: hidden
第一个方法很简单，缺点是不太直观，即为父元素应用overflow: hidden，以强制它包围浮动子元素。
方法二：同时浮动父元素&width: 100%
我们给span的父元素section元素也添加float: left以让section元素浮动起来。浮动section以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住它的子元素。因此，需要用width: 100%再让section的宽度撑满其父元素的内容区宽度。
section父元素内的span子元素
section父元素内的p子元素
section父元素内的p子元素
方法三：添加非浮动的清除元素
第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于父元素一定会包含非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此父元素一定会包含这个子元素——以及前面的浮动元素。在父元素内最后添加子元素作为清除元素的方式有两种。
第一种方式是简单地在HTML标记中添加一个子元素（div很适合这个目的，因为它在无子元素时的默认高度为零，不会引入多余空间），并给它应用clear属性，如下所示。但这种过方式会在HTML中引入没有实际语义的纯表现性元素。
section父元素内的span子元素
section父元素内的p子元素
section父元素内的p子元素
另外一种方法就是使用:after伪元素可以帮助我们实现这个目的，思路其实和上面的方法是一样的。
section父元素内的span子元素
section父元素内的p子元素
section父元素内的p子元素
提醒一下，这里的:after伪元素对应元素内部的末尾位置，而不是元素本身之后的下一个位置。
