一：页面布局方式
页面布局方式，主要包含：文档流，浮动层，float属性
1.文档流
html页面的标准文档流默认布局是：从上到下，从左到又，遇块级元素换行。
如下图：
按照正常的文档布局
<body>
还没浮动左侧
<img src="./images/car.jpg">
还未浮动右侧
</body>
2.浮动层
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素（默认为body文本区域）的左右边框。而此浮动元素在文档流空出的位置，由后续的非浮动元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
如图：已经浮动，且高度塌陷
<body>
浮动左侧
<img style="float:left;" src="./images/car.jpg">
浮动右侧
</body>
3.实例
一：
<div style="float:left; background-color:#ccc; width:200px; height:200px" >a</div>
<div style=" background-color:red; width:300px; height:300px">b</div>
解释：块级元素(a) float：left，下一个相邻块级(b)元素
b会填充a遗留下来的空间，a和b会发生重叠，a的图层在上面
二：
<div style="float:left; background-color:#ccc; width:200px; height:200px" ></div>
<a >我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素</a>
解释：块级元素(a) float：left，下一个相邻内联(b)元素
b会紧跟在a后面，并根据自身内联元素的特点，是否换行。
三：
<a style=" float:left; ">我是内联元素</a>
<div style="background-color:#ccc; width:200px; height:200px" ></div>
解释：内联元素（a）float:left;下一个块级元素（b）b不会跟随a的移动
四：
<a style=" float:left; background:red" >我是内联元素</a>
<a style="background:green;">我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素我也是内联元素</a>
解释：内联元素（a）float:left;下一个内联元素（b）
b会紧跟在a的后面。并根据自身内联元素的特点，是否换行
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
