css 盒模型 文档流 几种清除浮动的方法实例详解

CSS盒模型

CSS盒模型指的是用于设计和排版网页元素的基本框架，每个元素都是一个矩形盒子，其由四部分组成：内容(content)、填充(padding)、边框(border)、外边距(margin)。

其中，content + padding + border 就是元素的内部空间，而 padding + border + margin 则是元素的尺寸大小。在CSS2.1中，盒模型的标准有两个：W3C盒模型和IE盒模型。IE盒模型的 width 属性是元素的“内部宽度”，而W3C盒模型的 width 属性是元素的“内容宽度”。

文档流

HTML中的文档流是指HTML元素根据其出现的顺序逐一排列的方式。根据文档流的特性，元素会自动占用HTML页面的空间，并把其他元素往下推。当页面高度不足以容纳元素时，就会出现滚动条。

清除浮动的方法

当一个元素被浮动之后，它不再占据文档流中的位置，如果其父元素没有设置高度，就会导致父元素高度塌陷，进而影响整个页面的布局。因此，我们需要使用清除浮动的方法来解决这个问题。

下面是几种清除浮动的方法：

1. 使用空标签清除浮动

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

这种方法是使用CSS的 :after 伪类选择器来在元素之后插入一个空的块级元素，并设置 clear: both; 来清除浮动，使父元素获取高度。

2. 使用父元素触发BFC

.parent { 
    overflow: hidden; 
}

这种方法是使用CSS的BFC（块级格式化上下文）特性来清除浮动，实现方式是给父元素添加 overflow: hidden; 属性，触发BFC，使父元素包含浮动元素的高度。

示例说明

示例一

<div class="parent">
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
</div>

.parent { 
    overflow: hidden; 
}

此示例中，父元素添加了 overflow: hidden; 属性，触发BFC，使父元素包含浮动元素的高度，从而实现浮动元素不影响父元素高度的效果。

示例二

<div class="clearfix">
    <img src="image.jpg" class="float-left">
    <p>图片描述文字</p>    
</div>

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

此示例中，使用了空标签清除浮动的方法，使 .clearfix 元素的after伪类塞入清除浮动的功能，使其父元素不受浮动元素影响。当然，根据web语义化的原则，可以使用更加合理的方法来替代这种空标签法，例如使用额外的父元素包裹浮动元素。