CSS 标准流 浮动 清除浮动

１ 新知识学习

１.1  标准流（normal flow）

   页面中标签的默认显示方式

１.2  浮动（float）

  用法：
         float：left |  right
     特点：
              ◆浮动的元素不占位置（脱标）。
              ◆浮动可以让块级元素在一行上显示。
              ◆实现元素的模式转换（脱标）

     作用：
            ☞解决图片文字环绕（文字不会受浮动的影响）
           ☞制作导航（使用列表）
           ☞浮动网页布局

 

１.3  清除浮动（重点）

清除浮动：清除浮动的影响。
清除浮动方式：
◆使用clear清除浮动
                          left
                          right
                          both

◆给父元素设置overflow:hidden;
注意：如果父元素中没有设置定位的元素，可以使用overflow：hidden，否则不推荐使用。

◆使用伪元素清除浮动
           

☞什么时候要用浮动？

    ◆在网页布局中，需要块级元素在一行显示，就用浮动 

       
☞什么时候清除浮动？
    ◆父元素没有设置高度（必须条件）
    ◆父元素中所有的子元素都设置了浮动（必须条件）

 

１.4  CSS初始化

 ☞把页面中标签的默认样式给层叠掉（padding,margin）

☞设置网页中标签的默认样式（font-size,font-family,color, 清除浮动。。。。）

 

１.5  overflow的用法

    ☞overflow： visible;      默认超出部分可见
    ☞overflow:   hidden;   超出部分隐藏
    ☞overflow:   scroll;     添加滚动条
    ☞overflow：auto;     根据内容自适应