div清除浮动css样式代码分享(4种方法)
2013-12-02 15:40
274 查看
1、结尾处加空div标签 clear:both
这种方法,感觉之前大家用的比较多。但是无缘无故多出一个空的div,而且浮动越多就要不断加div,让我感觉很忧伤,所以我不太喜欢用。
2、父级div 也一起浮动
这个方法我记得我是在学校的时候,看老外的CSS书时看到的,当时觉得很好用,但是现在觉得最好还是别用了,有时真的会很麻烦。
因为父级的元素一浮动,又会产生其他元素的浮动问题,不信你可以试试。
3、父级div定义 height
这个方法其实我还是蛮常用的,主要用在那些可以确定高度的元素上,感觉使用上很方便。但是那些需要自适应高度的就不适合了。
4、父级div定义伪类:after 和 zoom
这个方法也是我平时比较喜欢用的,感觉还挺好用的。
可以定义一个通用类选择器,然后反复使用:
刚用这个的时候,还不知道content属性是干嘛的,后来查了下是这么解释的:
content配合before和:after伪类一起使用,用于插入内容。
小小举个例子,简单写一下:
最后的显示结果是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{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 清除浮动的4种方法
- DIV+CSS 清除浮动常用方法总结
- CSS清除浮动的4种方法
- 清除浮动的七种方式方法(实例代码讲解)
- 关于浮动清除的一些小感悟,4种方法清除浮动
- 清除浮动的七种方式方法(实例代码讲解)
- 清除浮动的七种方式方法(实例代码讲解)
- DIV 清除样式浮动万能代码
- 清除浮动的七种方式方法(实例代码讲解)
- CSS清除浮动的4种方法
- DIV 再论清除浮动的空方法
- DIV+CSS中清除浮动的7种方法分析
- div标签清除float浮动样式方法
- 活学活用,CSS清除浮动的4种方法
- 清除浮动4种方法总结下
- css 清除浮动的几种方法
- 清除float浮动的几种方法
- CSS笔记:伪类清除浮动的两种方法
- 夏普打印机卡纸后出现 错误代码h5-01的清除方法
- 23_css清除浮动的三种方法.html