当前位置: 首页 > Web前端 > HTML

CSS中清除浮动的四种方法

时间:2023-04-02 20:47:10 HTML

当CSS清除浮动和不清除浮动时会发生什么?HTML:

CSS:.container{width:300px;边框:1px实心#000;背景色:#aaa;}.left{宽度:100px;高度:100px;背景色:#ffff00;向左飘浮;#fa0000;浮动:对;}效果:子元素div没有展开父容器,这就是我们需要清除浮动的原因。解决方法:在浮动元素后面添加一个class为clear的空div元素,并为这个div.clear{clear:both;}设置样式:
CSS:.clear{clear:both;}效果:给父容器添加overflow:hidden或autoStyleHTML:CSS:.容器{宽度:300px;边框:1px实心#000;背景色:#aaa;溢出:隐藏;/*或自动*/zoom:1;/*IE6*/}作用:给父容器添加clearfix类,使用伪元素clearfix:after设置样式,清除浮动HTML:CSS:.clearfix{zoom:1;/*IE6*/}.clearfix:after{内容:".";高度:0;明确:两者;显示:块;可见性:隐藏;}作用:给父容器添加浮动,当父元素本身是浮动的时候使用该方法。一般不使用这种方法。