主页 / 建站知识 /

div清除浮动css样式代码分享(4种方法)

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

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";}
<p><a href="#" target="_blank">AAA</a></p>

的显示结果是AAAaaa


复制代码
代码如下:

.div1{background:#000080;border:1px solid red;}</p> <p>.left{float:left;width:20%;height:200px;background:#DDD}</p> <p>.right{float:right;width:30%;height:80px;background:#DDD}</p> <p>.clear{zoom:1}</p> <p>.clear:after{display:block;clear:both;content:"";}

上一篇：css后代选择器使用方法实例 下一篇：css中的clear属性使用方法实例介绍

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by