清除浮动
今天学习了下清除浮动:
第一种:直接在div中clear:both;//比如我想div4有清除浮动的效果直接对div4进行
样式设置clear:both;
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
第二种: 在需要清除浮动的位置创建一个div clear:both;//比如我想div4具有清除浮动的效果就在div4的前面加上一个div对此div进行样式设置clear:both;也可以
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
两种后者更方便使用如想更换清除浮动的位置只需要直接更改div的位置就可以了
第三种:使用伪元素进行清除//使用的基本都是这种
#clearDiv::after{
content: ""; //使div中有内容但是不需要具体内容就相当于占位
visibility:hidden; //为了防止误操作使div中存在内容,造成排版混乱此操作进行内容隐藏
height: 0px; //以免一些操作使此div存在行高将此行高设置为默认值0px;
display: block;//进行块级显示
clear: both;清除浮动
}
解决兼容性问题
#clearDiv{
zoom:1;
}