css清除浮动（clearfix）的3种方式

一、背景

css中使用了float浮动元素，导致页面中某些元素不能正确的显示。

二、浮动引起的后果

（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。
（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置。
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示。

三、css清除浮动3种方式

1.父元素使用overflow属性

（1）用法

overflow:hidden;

或者

overflow:auto;

（2）拓展

（3）说明

当给父元素设置了overflow样式，本质就是建构了一个BFC(块级格式化上下文)，使得达到撑起父元素高度的效果。
.
.
.

2.用:after伪类（::after 选择器在被选元素的内容后面插入内容）

（1）用法

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

（2）说明

给父级元素添加了一个::after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。
.
.
.

3.添加空标签，使用clear:both属性（不建议使用该方法）

（1）用法

<div style="clear: both"></div>

（2）说明

在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。
优点：简单，方便兼容性好。
缺点：因为会造成结构混乱，不利于后期维护。

css清除浮动（clearfix）的3种方式相关推荐

CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
清除浮动的常用几种方式
(1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单. ...
css清除浮动clearfix
.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
CSS清除浮动（float）的三种方式
标题CSS清除浮动(float)的三种方式为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...

css清除浮动（clearfix）的3种方式

一、背景

二、浮动引起的后果

三、css清除浮动3种方式

1.父元素使用overflow属性

（1）用法

（2）拓展

（3）说明

2.用:after伪类（::after 选择器在被选元素的内容后面插入内容）

（1）用法

（2）说明

3.添加空标签，使用clear:both属性（不建议使用该方法）

（1）用法

（2）说明

css清除浮动（clearfix）的3种方式相关推荐

最新文章

热门文章