顽皮的雪狐七七:CSS——清除浮动所有方法总结

为什么要清除浮动?

如何清除浮动?

额外标签法

1.1 末尾标签法

1.2 内部标签法

overflow

伪元素法(最常用)

3.1 使用after伪元素清除浮动

3.2 after伪元素空余字符法

3.3 使用before和after双伪元素清除浮动(推荐)

三种方法总结

为什么要清除浮动?

一开始css的浮动，其本质是用来做一些文字混排效果的，但是后来被我们拿来做布局用，就出现了很多问题。

清除浮动的本质：为解决父级元素因为子级浮动引起高度为0的问题

我们很多时候不方便给父盒子的高度，因为我们不清除有多少子盒子，有多少内容。经常的做法会让内容撑开父盒子的高度。但是如果父盒子中有子盒子浮动了之后，就会影响到后面的盒子，因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖，解决这个问题的方法就要清除浮动

原理图

float.png

如何清除浮动?

清除浮动其实叫做闭合浮动更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器 { clear : 属性值 ; }

/*属性值为left,清除左侧浮动的影响

属性值为right,清除右侧浮动的影响

属性值为both,同时清除左右两侧浮动的影响*/

复制代码

1. 额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用：

复制代码

1.2 内部标签法

把div放进父盒子里，这样盒子会撑开，一般也不会用。

2. overflow

给父级元素添加overflow样式方法。

这种方法代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是溢出隐藏的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

.father {

overflow: auto;

/* 加上这句话，就可以清除浮动 overflow = hidden|auto|scroll 都可以实现*/

}

复制代码

3. 伪元素法(最常用)

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1触发hasLayout来清除浮动

代表网站：百度、淘宝、网易等

.clearfix:after{

content:"."; /尽量不要为空，一般写一个点/

height:0; /盒子高度为0，看不见/

display:block; /插入伪元素是行内元素，要转化为块级元素/

visibility:hidden; /content有内容，将元素隐藏/

clear:both;

}

.clearfix {

zoom: 1; / *只有IE6,7识别 */

}

复制代码

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix，也需要兼容IE6-IE7

在Unicode字符里有一个“零宽度空格”，即U+200B，代替“.”，可以减少代码量，不再使用visibility:hidden

代表网站：阿里巴巴

.clearfix::after{

content:"\200B"; /* content:’\0200’; 也可以 */

display:block;

height:0;

clear:both;

}

.clearfix {

*zoom: 1;

}

复制代码

3.3 使用before和after双伪元素清除浮动(推荐)

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7

代表网站：小米、腾讯

.clearfix:before, .clearfix:after {

content: “”;

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

复制代码

三种方法总结

css清除浮动方法额外标签法overflow伪元素法

优点写法简单，兼容性好写法简单，兼容性好符合闭合浮动思想，结构语义化正确，可以解决问题

缺点添加了无意义的标签，结构化比较差overflow的本质是溢出隐藏，超出元素无法显示写法复杂，需要兼容

顽皮的雪狐七七:CSS——清除浮动所有方法总结相关推荐

div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css清除浮动的方法及原因
清除浮动的方法及原因为什么要清除浮动清除浮动的方法方法1:为父元素设置高度方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法方法4:给父元素设置overflow: ...
CSS清除浮动的方法
我们先看看浮动导致什么样的效果. 正常没有浮动的案例如下: <!DOCTYPE html> <html><head><meta charset="u ...
CSS 清除浮动的方法
CSS中利用float属性可以使元素脱离文档流浮动到父元素的左侧或者浮动的父元素的右侧,这时如果对元素使用浮动属性,会导致父元素不能被撑开. CSS代码: .wrapper{width: 40em;b ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...
前端开发面试题—CSS清除浮动的方法
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...

顽皮的雪狐七七:CSS——清除浮动所有方法总结

顽皮的雪狐七七:CSS——清除浮动所有方法总结相关推荐

最新文章

热门文章