CSS那些事儿-阅读随笔3（清除浮动）_html/css_WEB-ITnose

浮动主要是由浮动（float）属性导致的页面错位现象，清除浮动不仅能解决页面错位的现象，还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题。在CSS样式中，主要利用clear属性中的both、left和right 3个属性值清除由浮动产生的左、右浮动效果。

一、浮动现象例子

下面举一个很简单的浮动的例子，假设一个float_box（背景色为 #aff ）中包含两个div，且一个是左浮动（float:left），另一个是右浮动（float:right）。在float_box外再添加一个没有浮动属性的div（no_float），那么代码以及预期效果和实际效果如下：

 1   2   3   4       5      css-test  6       7         .float_box{ 8             background-color: #aff; 9         }10         .float_left{11             float:left;12             width: 200px;13             height: 100px;14             border: 2px solid #f00;15         }16         .float_right{17             float:right;18             width: 200px;19             height: 100px;20             border: 2px solid #00f;21         }22         .no_float{23             color: #fff;24             background-color: #aaa;25         }26      27  28  29 
30     
左浮动元素

      
查看更多关于CSS那些事儿-阅读随笔3（清除浮动）_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114150