5、浮动
- 块级元素：独占一行 如：h1-h6 p div 列表…
- 行内元素：不独占一行 如：span a img strong…
- 行内元素可以被包含在块级元素中，反之则不可以
5.1、display
- 实现行内元素排列的一种方式，但更多的是用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
/*display: block;
以块级元素展示的时候不会被包含
*/
}
</style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- display: block 块级元素
inline 行内元素
inline-block 是块元素，但可以内联，在一行-->
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>
5.2、float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../float.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer1">
<img src="../picture/斯嘉丽.jpg" height="313" width="500"/>
</div>
<div class="layer2">
<img src="../picture/气球.jpg" height="333" width="200"/>
</div>
<div class="layer3">
<img src="../picture/舞者.jpg" height="375" width="300"/>
</div>
<div class="layer4">
风急天高猿啸哀，渚清沙白鸟飞回；无边落木萧萧下，不尽长江滚滚来。
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid #CE4A50;
}
.layer1{
border: 1px solid #CE4A50;
display: inline-block;
float: right;
}
.layer2{
border: 1px solid #CE4A50;
display: inline-block;
float: right;
}
.layer3{
border: 1px solid #CE4A50;
display: inline-block;
float: right;
}
.layer4{
border: 1px solid #CE4A50;
line-height: 23px;
font:oblique bolder 12px 楷体;
display: inline-block;
float: right;
}
5.3、父级边框塌陷
- clear
/*clear:right 右侧不允许有浮动元素
/*clear:left 左侧不允许有浮动元素
/*clear:both 两侧不允许有浮动元素
*/
.layer4{
border: 1px solid #CE4A50;
line-height: 23px;
font:oblique bolder 12px 楷体;
display: inline-block;
float: right;
clear: right;
}
-
解决方案
1、增加父级元素的高度：不推荐
#father{ border: 1px solid #CE4A50; height: 800px; }2、增加一个空的div标签，解除浮动
<div class="clear"></div>.clear{ clear: both; margin: 0; padding: 0; }3、overflow ：在父级元素中增加一个overflow：hidden
#father{ border: 1px solid #CE4A50; overflow: hidden; }4、在父类中添加一个伪类：after
#father:after{ content: ''; display: block; clear: both; } -
小结
1、浮动元素后面增加空div，虽然简单，但是代码中尽量避免使用空div
2、设置父级元素的高度，虽然简单，但是元素假设有了固定的高度，就会被限制
3、overflow，简单，下拉的一些场景避免使用
4、父类添加一个伪类：after，推荐使用，写法虽然复杂，但没有副作用
-
display与float对比
display：方向不可以控制
float：浮动起来会脱离标准文档流，需要解决父级边框塌陷的问题