浮动标签的使用

一、学习目的

会使用display属性排版网页元素

会使用float属性排版网页元素

会使用float属性创建横向多列布局

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

二、标准文档流

标准文档流：值指元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。

构成：

块级元素（block）：<h>,<p>,<div>

特征：独占一行，且可以自行定义宽度

内联元素（inline）：<span>,<a>,<img>,<strong>

特征：宽高由文本内容决定，不能设置宽高

注：内联元素可以包含在块级元素里面，反之错误

把文本放置中间的区域的小窍门：设置的行高和区域高度一致，即height=px；line-height=10px；

三、display属性

block：把行内元素转换成块元素     display:block;

inline：把块元素转换成行内元素     display:inline;

inline-block：行内块元素，既具有块元素的特性还有行内元素的特性     display:inline-block;

none：设置元素不会被显示（一般不会用，这个的作用相当于不设置）    display:none;

四：浮动

right：向右浮动     float:right;

left：向左浮动      float:left;

none：不浮动（一般不用，跟没用浮动一样的）

浮动可以实现从右向左的排列，从下到上的排列

五、清除浮动

使得浮动位于清除侧的最低标准线（先于该浮动浮动的最低标准线）

一旦浮动就跟原有特征不相干了，无所谓的块元素和行内元素

六、边框塌陷

由于浮动导致的边框区域缩小或者扩大，从而使得边框塌陷。

解决方法：

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>

.clear{  clear: both;  margin: 0; padding: 0;}

2、设置父元素的高度

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

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

3、父级添加overflow属性

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

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

overflow的属性：

visible：默认值，内容不会被修剪，会呈现在盒子之外

hidden：内容会被修剪，并且其余内容是不可见的

scroll：内容会被修剪，并且浏览器会显示滚动条以便查看其余内容

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

4、父类添加伪类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：写法比上面稍微复杂一点，但是没有副作用，推荐使用

七、总结