一、标准文档流
1.定义
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
2.标准文档流组成
块级元素（block）
<h1>…<h6>、<p>、<div>、列表内联元素（inline）
<span>、<a>、<img/>、<strong>...注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
二、display属性
display常见的属性值
- display:block; 将内联元素转变成块级元素，元素独占一行，可设置宽高
block效果呈现
- display:inline; 将块级元素转变成内联元素，元素排在同一行，宽高为内容的宽高
inline效果呈现
- display:inline-block; 将元素转变成行块元素，元素排在同一行，可设置元素宽高
inline-block效果呈现
- display:none; 设置元素不被显示
none效果呈现
三、 float浮动
1.float属性
float属性值
-
示例html代码
<div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> -
设置图片浮动css代码
.layer01 { border:1px #F00 dashed; float:right; /*设置图片右浮动*/ } .layer02 { border:1px #00F dashed; float:right; /*设置图片右浮动*/ } .layer03 { border:1px #060 dashed; float:left; /*设置图片左浮动*/ } -
呈现效果
浮动呈现效果
2.浮动的特性
- 设置左右浮动后，元素会尽量往左往右靠拢，当元素碰到父级元素的边框或者另一个同级元素的边框时就会停下来
- 在一个块级元素里，若设置前面的元素设置了浮动时，后面的元素不设置浮动时，后面的元素会收到影响，会环绕包裹浮动的元素
文字环绕效果
3.清除浮动 （clear）
- 因为设置浮动时，前面设置浮动的元素会影响后面没有设置浮动的元素（环绕效果），而清除浮动会清除浮动元素对没有浮动元素的影响（清除环绕效果）
clear属性值
3.1 清除左边浮动（clear:left;）
- 只是清除左边浮动的元素对元素块产生的影响，相当于清除文字对左边浮动元素的环绕效果，但是依旧会环绕右边浮动的元素
清除左边浮动效果图
3.2 清除右边浮动（clear:right;）
- 只是清除右边浮动的元素对元素块产生的影响，相当于清除文字对右边浮动元素的环绕效果，但是依旧会环绕左边浮动的元素
清除右边浮动效果图
3.3 清除两边浮动（clear:both;）
- 清除元素块两边的浮动效果，相当于对两边的元素都不产生环绕效果
清除两边浮动效果图
四、解决父级边框塌陷的方法
- clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，下面介绍防止父类塌陷的四种方法，下图为父类塌陷的示例图
父类塌陷示例图
1.浮动元素后面加空div
-
代码
<div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子可以向左浮动，...</div> <div class="clear"></div> </div> -
效果图
浮动元素后面加空div的方法并不明显
加空div效果图
2.设置父元素的高度
-
代码
#father { border:1px #000 solid; height: 420px; /*设置父类元素的高度*/ } -
效果
设置父类元素高度效果图
3.父级添加overflow属性
3.1 overflow溢出处理
overflow属性值
-
visible值
默认值。内容不会被修剪，会呈现在盒子之外overflow: visible;
visible效果图
-
hidden值
内容会被修剪，并且其余内容是不可见的overflow: hidden;
hidden效果图
-
scroll值
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容overflow: scroll;
scroll效果图
-
auto值
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容overflow: auto;
auto效果图
3.2 添加overflow属性防止父类塌陷
-
代码
在父类属性css代码中设置overflow: hidden;#father { border:1px #000 solid; overflow: hidden; /*在父类属性里面设置overflow: hidden; */ } -
效果图
添加overflow后效果图
4.父级添加伪类after
-
代码
/*设置父类class="clear*/ .clear:after{ content: ''; /*在clear类后面添加内容为空*/ display: block; /*把添加的内容转化为块元素*/ clear: both; /*清除这个元素两边的浮动*/ } -
效果图
添加伪类after效果图
5.四种方法的小结
5.1 浮动元素后面加空div
- 简单，空div会造成HTML代码冗余
5.2 设置父元素的高度
- 简单，元素固定高会降低扩展性
5.3 父级添加overflow属性
- 简单，下拉列表框的场景不能用
5.4 父级添加伪类after
- 写法比上面稍微复杂一点，但是没有副作用，推荐使用
五、inline-block和float的区别
1.display:inline-block
(1)可以让元素排在一起，并且支持宽度和高度，代码实现起来比较方便
(2)位置方向不可控制
(3)IE 6、IE 7上不支持
(4)会有空隙，空隙是浏览器默认设置的元素样式
display效果不足的地方
