Rumah > Artikel > hujung hadapan web > CSS如何清除浮动?css清除浮动的五种方法总结
这篇文章给大家介绍的内容是关于CSS如何清除浮动?css清除浮动的五种方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
方法一(使用空标签带clear属性)
标签可以是div br hr
在浮动元素后使用一个空元素如5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用db9da0c8f2980956c6531e0c04ab02d3或1d4f066caf78b94378f889402f3c966c来进行清理。
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
在浮动元素下加5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3 .clear{ height:0px;font-size:0;clear:both;},但是在ie6下,块元素有最小高度,即当heightcae6ee6b7cc812fb8ca857f827f48fe1用以清除浮动
方法二(给浮动元素的父元素添加overflow属性)解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto
overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6,也可以用height:1%;的方式解决,
注意:zoom不符合W3C标准。overflow:hidden也可以实现。
<ul style="overflow:auto;zoom:1> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul>
方法三:(给浮动的元素的容器添加浮动,即为父级添加float来清除浮动)
<div style="float: right;background-color: #1a1a1a;"> <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;"> </div> <div style="width: 500px;height: 200px;background-color: #8a6d3b"> </div> </div>
给浮动元素的容器也添加上浮动属性即可清除内部浮动
缺点:会使其整体浮动,影响布局,不推荐使用。
方法四: (使用after伪对象清除浮动)
after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
通过after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
二、content属性是必须的,但其值可以为空,讨论该方法的时候content属性的值设为".",
<style type="text/css"> .listinfo:after{ display:block; clear:both; content:""; visibility:hidden; height:0; } <ul class="listinfo"> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul>
方法五:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
方法与添加一个空标签类似,只是此处用浮动元素紧邻的元素
使用情况:
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;
在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);
如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;
正文中使用邻接元素清理之前的浮动。
使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰;
BUG修正:
(1)、双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发
双倍边距。
快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。
(2)、3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。
快速修正:在受影响的文本上设置宽度或高度。
(3)、IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。
快速修正:用父元素的底内补白(padding)代替。
相关推荐:
css中定位问题:绝对定位、相对定位、fixed和static
Atas ialah kandungan terperinci CSS如何清除浮动?css清除浮动的五种方法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!