css float属性.pdfVIP

css float 属性 页面布局方式 页面布局方式，主要包含：文档流、浮动层、float 属性。 文档流 HTML 页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。 浮动层 浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为 body 文本区域)的左右边框。 而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重 叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。 float 属性介绍 ① left ：元素向左浮动。 ② right ：元素向右浮动。 ③ none ：默认值。 ④ inherit ：从父元素继承float 属性。 示例 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 1 / 8 html xmlns =/1999/xhtml head title 2.3-float 属性/title style type=text/css #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } /style /head body div id=a div-a/div div id=bdiv-b/div div id=cdiv-c /div input type =text value =input1 / input type =text value =input2 / input type =text value =input3 / div id=ddiv-d/div input type =text value =input4 / /body 2 / 8 /html 2. float:left 说明：元素向左浮动。 代码变更 input2 添加：float:left div-b 添加：float:left div-d 添加：float:left 变更后视图 ① 浏览器的宽度 “不够长”时 ② 浏览器的宽度够长时 3 / 8 结论 下一个紧邻元素分类(不含f 当前元素分类(float:left) 结论 loat) 块级元素(b) b 会填充 a 遗留下来的空间