5.1 介绍
块级元素:独占一行
h1~h6 p div 列表…
行内元素:不独占一行
span a img strong…
行内元素可以被包含在块级元素中
5.2 浮动
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display:none;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display:inline-block;
}
</style>
1、这也是实现行内元素排列的方式,大多数情况用float
5.3 float
1、左右浮动
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid red;
}
.layer01{
border: 1px solid saddlebrown;
display: inline-block;
float: left;
}
.layer02{
border: 1px solid darkblue;
display: inline-block;
}
.layer03{
border: 1px solid forestgreen;
display: inline-block;
}
.layer04{
border: 1px solid aqua;
font-size: 12px;
line-height: 23px;
display: inline-block;
}
5.4、父级边框塌陷的问题
/clear:right 右侧不允许有浮动元素
clear:left 右侧不允许有浮动元素
clear:both 两侧不允许有浮动元素/
解决方案:
1、增加父级元素的高度
#father{
border: 1px solid red;
height: 800px;
}
2、增加一个空的div标签,清除浮动
.clear{
clear: both;
margin: 0;
padding: 0;
}
3、overflow
在父级元素中增加一个 overflow: hidden;
4、父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}
小结:
1、 浮动元素后面增加空div
简单,代码中尽量避免空div
2、 设置父元素高度
简单,元素假设有了固定高度 就会被限制
3、 overflow
简单,下拉的一些场景避免使用
4、 父类添加伪类after(推荐)
写法复杂一点,但是没有副作用
5.5 对比
-
display
方向不可以控制 -
float
浮动起来可能会脱离文档流,所以要解决父级边框塌陷问题