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 属性的值。

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

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

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

.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: yellowborder: 3px solid black

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

解决浮动的负面影响

解决后的效果图

①、给父元素定义高度

.parent{    height: 50px;}

②、给父元素加上overflow：hidden

.parent{     overflow: hidden;}

③、给父元素加上overflow：auto

.parent{     overflow: auto;}

④、给父元素加上display: table

.parent{     display: table;}

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

⑥、父元素定义伪类：after

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

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