码迷,mamicode.com
首页 > Web开发 > 详细

css清除浮动

时间:2019-12-09 19:45:39      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:event   before   code   就是   closed   style   col   清除浮动   eve   

清除浮动的本质:标准流会撑开盒子,若浮动了,浮动元素不占有位置,父亲没有高度,底下盒子会跑上来。要做的就是闭合浮动。

方法

1.额外标签法  加空标签<div>   

<div style="clear: both;"></div>
2.父级添加overflow属性   overflow:hidden
3.使用after伪元素
 1 .clearfix::after {
 2     content: ".";
 3     display: block;
 4     height: 0;
 5     clear: both;
 6     visibility: hidden;
 7 }
 8 .clearfix {
 9     *zoom: 1;
10 }

4.使用before和after双伪元素清除浮动

技术图片
 1 .clearfix::before, .clearfix::after {
 2     content: "";
 3     display: table;
 4 }
 5 
 6 .clearfix::after {
 7     clear: both;
 8 }
 9 
10 .clearfix {
11     *zoom: 1;
12 }
View Code

 使用的时候,个人习惯使用最后一种,在需要清除浮动的元素的class里直接加上clearfix即可。

 

css清除浮动

标签:event   before   code   就是   closed   style   col   清除浮动   eve   

原文地址:https://www.cnblogs.com/Mask71/p/12012656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!