什么是浮动,以及解决父级边框塌陷的四种方法

float 浮动,浮动样式主要用于对块元素的布局,元素一旦浮动起来就会脱离标准文档流,这样就可以让块元素一行多个显示,

float浮动属性值包括:left,right,none(默认值),分别就是向左浮动,向右浮动和不浮动.

 

 clear清除浮动元素产生的空间,属性值包括left,right,both,分别是清除左浮动,清除右浮动和清除左右浮动.

清除左浮动或者清除右浮动可能会让元素重叠.

解决父级边框塌陷

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

            1、浮动元素后面加空div

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

：在浮动元素的后面 加上一个空div 设置clear:both 必须是块元素

            2、设置父元素的高度

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

给父元素设置高度 style="height:320px;"

            3、父级添加overflow属性

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

父级添加overflow属性 style="overflow: hidden;"

            4、父级添加伪类after

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

父级添加伪类after

        .clear::after{

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

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

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