《逆战班：第07天》

在HTML中，在用块级元素搭建页面结构时，块级元素按照普通文档流的方式，从上到下，从左至右，而当我们需要左右结构时，需要脱离普通文档流，而浮动就是使元素脱离普通文档流的方法之一。形成浮动流

      浮动的目的：让块级元素搭建左右页面结构。

      浮动的效果：1.左浮动在父级元素的左边，右浮动在父级元素的右边。

                  2.浮动值会影响到后面的元素，但不影响到前面的元素。

                  3.父级元素的宽度小于浮动元素的总宽度，子元素将被迫换行。

                  4.子元素高度不一致的浮动元素被迫换行时可能被卡住，会跟着最近的兄弟元素的高度。

如图所示

                  5.先写的先浮动，后写的后浮动。

                6.图文混排

浮动属性值font：；

   Left   左浮动    Right  右浮动        None  没有浮动

 

引入概念宽度高度自适应

 宽度自适应：

           默认宽度100%的元素。

           Width：；设置宽度100%不带单位，

高度自适应：

            HTML ，body{height：100%}

           不写高度height：；（让内容撑起来）

当高度自适应时浮动元素自适应父级高度塌陷：

问题： 父级不给高度时，子元素浮动，会造成父级元素高度塌陷。

父级元素给定高度时，子元素浮动

父级元素高度自适应时，子元素浮动

解决方法： 

1.给父级元素添加高度

         缺点：在给父元素增加内容时，需要大量的修改工作，不灵活。

       2.给父级元素添加overflow:hidden;（隐藏）出发一个BFC区域。

          缺点：被定位出来的元素将会被隐藏。

       3.清除浮动：clear:left(左浮动)/right(右浮动)/both(两者都)

                  条件：给浮动元素后面添加一个空标签（块状元素）

                       给空标签设置样式：width：0；

                                         Height：0；

                                         clear:left(左浮动)/right(右浮动)/both(两者都)

                  缺点：给浮动元素父级后添加空标签会造成代码冗余不利于浏览器加载速度。

         4.万能清除法：

                                  1.给父级元素增加一个类名；

                                  2.使类名与伪对象选择器结合

        

 .name:after{ content:””;    /*设置伪目标选择器*/
                 width:0;   /*设置宽度为0*/
                   height:0;/*设置高度为0*/
                  Display:block;   /*设置块状元素*/
                  clear:left/right/both;/*设置清楚浮动*/
                  Overflow:hidden;  /*设置文本超出隐藏*/
                visibility:hidden; /*设置隐藏*/
             }

Visibility:显示隐藏；

         Hidden 隐藏

         Visible  显示

Visibility与display的区别：

                       1.两者都可以显示、隐藏元素。

                       2.前者占据文档流，后者不占据文档流。