浮动元素的特性

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素带来的问题

因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。

清除浮动的三种方式

设置float

<div style="float: left;"><div style="float: left;">son div</div>
</div>

`overflow:hidden;`

<div style="overflow:hidden;zoom:1;"><p style="float: left;">使用overflow:hidden 清除浮动</p>
</div>

其中，zoom:1;用于兼容IE6。

`clear:both;`

<style>
.clearfix:after{/*START 真正起到清除浮动的代码*/content: '';display: block;clear: both;/*END 真正起到清除浮动的代码*/height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
</style>
<div class="clearfix"><div style="float: left;">clear:both ;son div</div>
</div>

清除浮动本质上是说要清除浮动元素带来的一些影响（例如高度塌陷）。在上面的例子中，我们给 :after伪元素添加了clear:both;属性,为了解释这个属性的作用，我们看下面的一段代码。

<div style="width: 150px; border: 1px solid #ccc;"><div style="width: 100px; background: greenyellow;">div1</div><div style="width: 100px; background: blueviolet; float:left;">div2</div><div style="width: 120px; background: grey; clear:left;"></div>
</div><div style="width: 150px; border: 1px solid #ccc; margin-top: 20px;"><div style="width: 100px; background: greenyellow;">div1</div><div style="width: 100px; background: blueviolet; float:left;">div2</div><div style="width: 120px; background: grey;  "></div>
</div>

clear:left;会让元素跟在其左侧浮动元素的后面，而不会忽略前面的浮动元素，位于浮动元素后面。同理，clear:right;则会清除元素右侧浮动元素的影响。而clear:both;就是清除左右两侧的影响。

另外一种方式position:absolute;

<div style="position:absolute;"><div style="float: left;">postion:absolute clear float</div>
</div>

之所以会提到这个方式，是为了说明前面两种方式（设置float和overflow:hidden;）清除浮动的原理：当给父元素设置overflow:hidden属性时，实际上父元素本身形成了一个BFC(Block Formating Context)。

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

形成一个BFC的情况：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

清除浮动的方式及其原理相关推荐

[css] 清除浮动的方式有哪些及优缺点？
[css] 清除浮动的方式有哪些及优缺点? 什么是盒子塌陷? 外部盒子本应该包裹住内部的浮动盒子,结果却没有.问题出现的原因父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度( ...
为什么要清除浮动？清除浮动的方式？
清除浮动是为了清除使用浮动元素产生的影响:浮动的元素,高度会塌陷,而高度的塌陷使我们页面后i按的布局不能正常显示. 清除浮动的方式: 1.额外标签法:给谁清除浮动,就在其后额外添加一个空白标签. 优点 ...
常用的几种清除浮动的方式
为什么要清除浮动?清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题.下面介绍四种清除浮动的方式: 1.额外标签法使用方法:在浮动元素末尾添加一个空标签. 例如: <div st ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...
为什么要清除浮动？清除浮动的方式
css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
3. 清除浮动的几种方式,及其使用
清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题额外标签法(在最后一个浮动标签后,新新加一个标签, 给其设置clear: both;)(不推荐) ...

清除浮动的方式及其原理

浮动元素的特性

浮动元素带来的问题

清除浮动的三种方式

设置float

`overflow:hidden;`

`clear:both;`

另外一种方式position:absolute;

清除浮动的方式及其原理相关推荐

最新文章

热门文章