CSS内容

• 盒模型
• 定位
• 普通文档流
• 绝对定位
• 浮动

盒模型

定位

梳理普通文档流、相对定位、绝对定位、固定定位和浮动的关系。

普通文档流

普通文档流占据文档空间，相对定位是相对于普通文档流的位置进行定位，元素仍占据原来的空间，故相对定位属于普通文档流。

绝对定位

绝对定位相对于距离它最近的那个已定位（非static）的祖先元素确定位置，脱离了普通文档流，不占据空间。
固定定位相对于视口（viewpoint），是绝对定位的一种。

浮动

浮动的元素不处于原来的文档流，不占据空间。
非浮动元素中包含浮动元素，清除浮动的4种方法：

1. 在html中包含元素的结束标签前添加块级元素，clear: both；
2. 在样式中使用伪类::after添加，同1，添加的元素属性display: block；
3. 使浮动包含元素，float: left/right；
4. 包含元素添加overflow属性，overflow的副作用可以清除浮动。

本文地址：https://blog.csdn.net/Xiuhua2017/article/details/107896206