day8浮动

1.css布局机制：

            普通流：标准文档流，实现自上而下排列的布局；

            浮动流：float,实现并列显示的布局

            定位流：position， 实现层叠布局

            浮动：

                作用：

                    1、让竖着排列的元素可以并列显示；

                    2、环绕布局

                浮动属性：

                    float:;

                        left 左浮动

                        right 右浮动

                        none  不浮动（默认值）

2.

浮动属性的特点：

            1、浮动后，元素会脱离文档流，会飘在上一层，后面的元素会把位置补上去，但浮动元素不会把后面元素里的内容(文字、插图片等)覆盖；

            2、如果让元素并列显示，那么需要并列显示的几个元素都要添加浮动属性；

            3、浮动元素，对前面的元素不产生影响，对后面的元素会产生影响；

            4、如果设置的都是右浮动，顺序会颠倒；

            5、浮动元素，会向左或者向右浮动，直到遇到另一个元素或者遇到元素边缘，或者遇到padding或者margin的时候，就停止继续浮动了；

            6、浮动元素对margin的auto属性值失效；

            7、浮动对元素本身的影响：

                -> 块元素添加浮动后，元素的宽高就根据内容显示，但是依然可以定义宽高；

                -> 行内元素添加浮动之后，元素就可以定义宽高等属性了；可以理解为隐性转换成了块元素的效果；

3.clear 清除浮动属性：

            注：不是给浮动元素添加的，而是添加给受到浮动元素影响的元素的；

            属性：

                clear:;

                    left   清除左浮动

                    right  清除右浮动

                    none   不清除（默认值）

                    both   清除两侧浮动

                注：只对块元素起作用；但是br例外，br是行内元素，但是也可以使用clear；

4.

  浮动引起的高度塌陷：

            什么是高度塌陷：就是当父元素没有定义高度，但子元素浮动了，父元素的高度就为0了；

            注：父元素是否高度塌陷，只受第一级子元素的影响；

            解决高度塌陷：

                1、设置高度:height

                   优点：简单

                   缺点：高度就固定，不能跟随内容的多少改变了；

5.

浮动引起的高度塌陷：

            什么是高度塌陷：就是当父元素没有定义高度，但子元素浮动了，父元素的高度就为0了；

            注：父元素是否高度塌陷，只受第一级子元素的影响；

            解决高度塌陷的方法(清除浮动)：

                1、设置高度:height

                    优点：简单

                    缺点：高度就固定，不能跟随内容的多少改变了；

                2、开启bfc：

                    -> 给父元素添加 overflow:hidden; (推荐)

                      优点：简单；

                      缺点：溢出父元素的内容会被隐藏；

                    -> 给父元素添加浮动属性 float:left;

                      优点：简单；

                      缺点：会带来新的问题；

                    -> 给父元素添加 display:inline-block;

                      优点：简单；

                      缺点：会带来新的问题；

                    -> ......

                3、添加空元素法：

                    在最后浮动元素的后面添加一个空元素，并且给该元素添加clear:both;

                    常用的标签有div 和 br；

                    缺点：会在增加结构代码

                     

                4、万能清除法：通过伪元素实现的方法；(推荐使用)

                    父元素::after{

                        content:'';

                        display:block;

                        clear:both;

                    }

                    伪元素：假的元素

                    ::after{} 在...之后（在该元素内部的最后面）添加一个空元素（这个空元素属于行内元素）

                  

                    注：::after 必须要配和content属性使用；