共计 1236 个字符，预计需要花费 4 分钟才能阅读完成。
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;
}
在实际开发中推荐使用第六种
