网站建设资讯

NEWS

网站建设资讯

div清除浮动css样式代码分享

这篇文章主要介绍“div清除浮动css样式代码分享”,在日常操作中,相信很多人在div清除浮动css样式代码分享问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”div清除浮动css样式代码分享”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司2013年成立,先为卓资等服务建站,卓资等地企业,进行企业商务咨询服务。为卓资企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1、结尾处加空div标签 clear:both

代码如下:


.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}

这种方法,感觉之前大家用的比较多。但是无缘无故多出一个空的div,而且浮动越多就要不断加div,让我感觉很忧伤,所以我不太喜欢用。

2、父级div 也一起浮动

代码如下:


.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

这个方法我记得我是在学校的时候,看老外的CSS书时看到的,当时觉得很好用,但是现在觉得最好还是别用了,有时真的会很麻烦。
因为父级的元素一浮动,又会产生其他元素的浮动问题,不信你可以试试。

3、父级div定义 height

这个方法其实我还是蛮常用的,主要用在那些可以确定高度的元素上,感觉使用上很方便。但是那些需要自适应高度的就不适合了。

代码如下:


.div1{background:#000080;border:1px solid red;height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

4、父级div定义伪类:after 和 zoom

这个方法也是我平时比较喜欢用的,感觉还挺好用的。

可以定义一个通用类选择器,然后反复使用:

代码如下:


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

刚用这个的时候,还不知道content属性是干嘛的,后来查了下是这么解释的:
content配合before和:after伪类一起使用,用于插入内容。
小小举个例子,简单写一下:

代码如下:


a:after{content:"aaa";}

AAA

最后的显示结果是AAAaaa

代码如下:


.div1{background:#000080;border:1px solid red;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

.clear{zoom:1}

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

到此,关于“div清除浮动css样式代码分享”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享名称:div清除浮动css样式代码分享
网页地址:http://cdweb.net/article/gojjhs.html