第七章 浮动

第七章 浮动

网页布局

常见的网页布局

标准文档流

根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。

display属性

• 块级元素block : < h1 >…< h6 >、< p>、< div>、列表 ，默认带有换行符

• 内联元素inline：< span>、< a>、< img/>、< strong>…默认前后没有换行符

• inline-block ：控制块元素排到一行，行内块元素，元素既具有内联元素的特性，也具有块元素的特性

• none：设置元素不会被显示

浮动属性

• 左浮动 left

• 右浮动 right

• 不浮动 none

清除浮动

clear属性

• left 清除左边浮动

• right 清除右边浮动

• ​ both 清除两侧浮动

• ​ none不清除浮动

解决父级边框塌陷的方法

浮动元素后面加空div (简单，空div会造成HTML代码冗余)

<div id="father" class="clear">
  <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>
.clear{  clear: both;  margin: 0; padding: 0;}

设置父元素的高度(简单，元素固定高会降低扩展性)

#father {height: 400px; border:1px #000 solid; }

父级添加overflow属性(简单，下拉列表框的场景不能用)

#father {overflow: hidden;border:1px #000 solid; }

父级添加伪类after(写法比上面稍微复杂一点，但是没有副作用，推荐使用)

.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

inline-block和浮动

 `display:inline-block`

• 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

• 位置方向不可控制，会解析空格

• IE 6、IE 7上不支持

  float

• 可以让元素排在一行并且支持宽度和高度，可以决定排列方向

• float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式