醉梦孤城的个人博客

记录我旅程美好的风景

Open Source, Open Mind,
Open Sight, Open Future!
  menu
9 文章
19681 浏览
0 当前访客
ღゝ◡╹)ノ❤️

浅谈css中清除浮动

众所周知,在css样式编写中,使用浮动对于我们开发者来说可以更好地,更轻松的处理页面布局。但是浮动诞生的初衷并不是为了布局。它的初衷就是处理页面中的文字,使其环绕在元素周围。所以,当浮动被我们开发者拿来布局之后难免出现了一些小问题。清除浮动(清除使用浮动之后对后面元素布局的影响)也因此而生。接下来就简单介绍几种清除浮动方法。不同意见的同学欢迎来补充,让我们相互学习相互进步。
第一种:使用clear元素清除浮动常见属性有left,right和both。分别对应着清除左浮动,清除右浮动,和左右浮动都清除。
第二种:使用空标签。常见的写发如下:

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

但是这样会添加很多无意义的标签,造成布局结构不合理。代码冗余等问题。不建议使用。
第三种:使用voerflow属性清除浮动。通过触发BFC的方式实现了清除浮动效果。代码十分简洁。但是在内容增多的时候会造成不会自动换行而导致一部分内容会被强制性隐藏起来无法显示。
第四种:使用伪元素after清除浮动。这种方法可以看作是额外标签法的升级版。写法如下:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom:1;
/I6I7专用/
}
推荐使用
第五种:使用双伪元素清除浮动代码如下
.clearfix:befor,.clearfix:after{
content: "";
display: table;

}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
/I6I7专用/
}
第六种:给容器设定固定的高度,但是只适用高度固定的布局。
这次分享就到此结束。新人上路还望多多关照。有什么建议或者意见欢迎支出。笔者会稍加改进。拜


标题:浅谈css中清除浮动
作者:zuimenggucheng
地址:http://chengwy.top:8080/articles/2019/08/05/1564975569227.html