1 浮动简介

CSS浮动是指浮动元素会脱离“文档流”并向左或向右浮动，允许文本和内联元素环绕它，直到碰到父元素或者另一个浮动元素。

需要注意的是，在CSS定位中absolute绝对定位以及fixed固定定位属于完全脱离文档流，其位置即不受其他元素影响，也不会影响到其他元素。而CSS浮动属于半脱离文档流，因为文本和内联元素会环绕浮动元素，这个也是float浮动属性被设计出来的初衷。

下面举个具体的例子，代码如下：

.content {border: 5px solid pink;border-radius: 5px;width: 500px;
}
.image {width: 150px;
}
.text {font-size: 14pt;
}

<!-- 省略内容部分 -->
<div class="content"><img class="image" src=""><div class="text">...</div>
</div>

效果如下：

下图是给图片image设置左浮动float: left;后的效果：

注意：将文本换成内联元素（a、b、span、img、input、…）也能实现内容环绕图片的效果。

若把图片的浮动换成绝对定位position: absolute;，其效果如下：

可以发现文字并不会环绕图片，而是直接被图片覆盖了。

2 为什么要清除浮动

当页面中还存在其他元素时，浮动可能会对其他元素的布局造成影响，如下图所示，此时页面并无异常：

但把文本内容减少后，如下图所示：

可以发现粉色框由于文本内容的减少，其高度也会随之减小，由于粉色框在计算高度时，不会计算浮动元素的高度，因此粉色框的高度为其中文本内容（沁园春雪）的高度。这样导致蓝色框上移而被图片覆盖，此时就要清除浮动，使粉色框高度撑开包裹图片，避免影响到蓝色框中的内容。

清除浮动究其本质为父容器未设置高度且子元素设置浮动时，父容器的高度不能被内容撑开（高度塌陷）。此时，元素会溢出到容器外而影响布局。

3 清除浮动`clear`属性

clear属性用于指定一个元素的左侧或右侧是否允许出现浮动元素，可能的取值如下：

值	描述
left	左侧不允许出现浮动元素
right	右侧不允许出现浮动元素
both	左侧和右侧不允许出现浮动元素
none	默认值，允许左侧和右侧出现浮动元素

给文本添加clear: left;样式属性，表示文本的左侧不允许出现浮动元素，由于图片事先设置了浮动，所以文本会另起一行显示，效果如下：

这样虽然解决了粉色框高度塌陷问题，但是却失去了文字环绕效果。

4 清除浮动的方法

4.1 额外标签法

从第三章的例子中可以获得灵感，文本在添加clear: left;样式属性清除左浮动后，会在图片下另起一行显示，所以粉色框的高度被撑开，解决了高度塌陷问题，那么完全可以用其他的元素来做这件事情，让文本依然处于原来的位置，这就是额外标签法，在浮动元素父级的末尾添加一个空的块级元素即可，再为其添加clear: both样式属性：

<!-- 省略内容部分 -->
<div class="content"><img class="image" src=""><div class="text">沁园春雪</div><!-- 额外标签 --><div style="clear: both"></div>
</div>
<div class="footer text">毛泽东诗词</div>

效果如下：

4.2 `after`伪元素法

伪元素after的作用是在元素之后添加一个子元素，但是这个元素并不会存在于DOM中，因此被称为伪元素。其实伪元素法和额外标签法的原理一样，都是通过在浮动元素父级的末尾添加一个空的元素来撑开父级元素的高度，使得浮动元素依然能包裹在父级盒子中，达到清除浮动的效果，只不过区别在于额外标签法添加的是一个真实的元素，而伪元素法添加的是伪元素。定义clearfix类的after伪元素如下：

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

将伪元素类clearfix添加到父级元素content上：

<!-- 省略内容部分 -->
<div class="content clearfix"><img class="image" src=""><div class="text">沁园春雪</div>
</div>
<div class="footer text">毛泽东诗词</div>

效果如下：

4.3 触发BFC清除浮动

BFC（Block formatting context）为块级格式化上下文，BFC可以理解为CSS中一个独立的布局环境，BFC中的元素布局不受外部元素的影响，BFC在计算高度时，内部浮动元素的高度也要计算在内，因此就避免了高度塌陷问题。

触发BFC的方式有很多种，详见BFC-MDN，这里选择最为常用的给父元素添加overflow: hidden属性的方式：

.content {/* ... */overflow: hidden;
}

效果如下：

5 总结

常用的清除浮动方法从原理上来讲只有两种：

撑开父元素高度（额外标签法、after伪元素法）
触发BFC机制

在实际项目中选择清除浮动的方法需要具体问题具体分析，不同的方法也有自身的优缺点，如额外标签法虽然兼容性好，但是会在页面中添加空标签，降低了代码可读性；而after伪元素法又可能产生IE浏览器的兼容问题。

CSS浮动和清除浮动相关推荐

前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
CSS基础之清除浮动
CSS基础之清除浮动本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
CSS之浮动/BFC/清除浮动（十二）
CSS 浮动/BFC/清除浮动 1,实现 CSS 布局的几种策略 2,正常布局流(Normal Flow) 2.1,正常布局流中,块级元素的排列方式 2.2,正常布局流中, 内联元素排版方式 3,浮动 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
CSS ：浮动与清除浮动
CSS :浮动与清除浮动 1.浮动 1.css 布局的三种机制 2.为什么需要浮动 3.什么是浮动 1.浮动口诀之浮 2.浮动口诀之漏 3.浮动口诀之特 4.浮动小结 5.浮动(float)的应用(重 ...
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮漏特案例:体会浮动现在就可以用float实现一些基本页面布局了链接清除浮 ...

CSS浮动和清除浮动

1 浮动简介

2 为什么要清除浮动

3 清除浮动`clear`属性

4 清除浮动的方法

4.1 额外标签法

4.2 `after`伪元素法

4.3 触发BFC清除浮动

5 总结

CSS浮动和清除浮动相关推荐

最新文章

热门文章

CSS浮动和清除浮动

1 浮动简介

2 为什么要清除浮动

3 清除浮动clear属性

4 清除浮动的方法

4.1 额外标签法

4.2 after伪元素法

4.3 触发BFC清除浮动

5 总结

CSS浮动和清除浮动相关推荐

最新文章

热门文章

3 清除浮动`clear`属性

4.2 `after`伪元素法