浮动

 

display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

 

浮动 

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

 

溢出处理

overflow属性

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

 

父级添加伪类after

<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>

.clear:after{

    content: '';          /*在clear类后面添加内容为空*/

    display: block;      /*把添加的内容转化为块元素*/

    clear: both;         /*清除这个元素两边的浮动*/

}

 

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余

设置父元素的高度

简单，元素固定高会降低扩展性

父级添加overflow属性

简单，下拉列表框的场景不能用

父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

 

inline-block和float的区别

display:inline-block

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

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

     IE 6、IE 7上不支持

float

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

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