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:"";}
div清除浮动,css样式
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]