css浮动及其危害和解决方法

html元素有三种类型：

①、块状元素： 如div -------- display：block
②、内联元素： 如span ------ display：inline
③、内联块元素：如input ---- display：inline-block

在标准流中，三种类型的元素呈现的方式不同
*display:block
元素会独占一行，多个block元素会各自新起一行
*inline 和 inline-block
元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行

如果想block元素像inline元素那些不会自动换行，可以用css的float属性（浮动）
left --------- 元素向左浮动。
right ------- 元素向右浮动。
none ------ 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit ---- 规定应该从父元素继承 float 属性的值。

虽然浮动很方便，但是也带来了一定的负面影响

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置

我们先来看一下正常的浮动效果

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
</div>

.parent{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
}
.child{
    width: 50px;
    height: 50px;
}
.child1{
    background-color: red;
    float: left;
}
.child2{
    background-color: blue;
    float: right;
}

正常的浮动效果

正常的效果如上图所示：
我们可以看到父元素本来是设置的属性

background-color: yellow
border: 3px solid black

都没有显示出来，就是因为浮动造成的高度坍塌！

解决浮动的负面影响

解决后的效果图

①、给父元素定义高度

.parent{
    height: 50px;
}

②、给父元素加上overflow：hidden

.parent{
     overflow: hidden;
}

③、给父元素加上overflow：auto

.parent{
     overflow: auto;
}

④、给父元素加上display: table

.parent{
     display: table;
}

⑤、在最后一个子元素上加一个div，使用clear：both

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div style="clear:both;"></div>
</div>

⑥、父元素定义伪类：after

.parent:after{
    content:"";
    display:block;
    clear:both;
}

在实际开发中推荐使用第六种