好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

float的深入剖析_html/css_WEB-ITnose

float是什么?

float即为浮动,在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:

文档流:在html中文档流即为元素从上至下排列的顺序。 脱离文档流:元素从正常的排列顺序被抽离。 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding)。 float造成的影响 对其父元素的影响

对于其父元素来说,元素浮动之后,它脱离正常文档流,所以它也无法撑开其父元素,造成父元素的塌陷,效果如下图所示。

  

 1 //CSS 2 #wrapper { 3     padding: 20px; 4     border: 1px solid red; 5     width: 350px; 6 } 7 .floatL { 8     width: 100px; 9     height: 100px;10     border: 1px solid #000;11     float: left;12 }13 .floatR {14     width: 100px;15     height: 100px;16     border: 1px solid #000;17     float: right;18 }19 .blue {background: #6AA;}20 .red {background: #A66;} 

1 //html 2 

AAAAAAAA

查看更多关于float的深入剖析_html/css_WEB-ITnose的详细内容...

  阅读:34次