浮动
目录
1. 标准文档流
- 块级元素：独占一行
h1~h6 p div 列表...
- 行内元素：不独占一行
span a img strong...
行内元素可以被包含在块级元素中，反之，则不可以
2. display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
display:
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行！（例如将列表由竖直放置改为水平放置）
none 不显示
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
这个也是实现浮动的一种方式，但是我们通常使用的是float
3. float
左右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/2.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid black;
}
/*浮动float*/
.layer01{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer02{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer03{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer04{
border: 1px dashed red;
display: inline-block;
float: left;
}
4. 父级边框塌陷的问题
clear
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 可以浮动
*/
解决方案
1. 增加父级元素的高度（不建议使用）
#father{
border: 1px solid black;
height: 800px;
}
2. 增加一个空的div标签，清除浮动
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/2.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
</div>
<div class="clear"></div>
</div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3. overflow
overflow:scroll;对超出长宽范围的内容用滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 350px;
height: 300px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/1.jpg" alt="">
<p>
路透社8月3日援引英国太阳报消息，根据一项由英国官员核可的协议，字节跳动将把TikTok总部从北京迁至伦敦。太阳报称，字节跳动创始人即将宣布近期内在伦敦成立办公室的意向。该报另称，此举可能让考虑在美国禁止TikTok的美国总统特朗普感到不安。尚未立即联系到TikTok对此事置评。微软周日宣布，将继续就收购中国互联网巨头字节跳动旗下的短视频手机应用TikTok进行磋商，并称计划在9月15日前完成谈判。据卫报7月20日报道，TikTok当时宣布退出将其非中国业务总部设在英国的谈判，将转向爱尔兰都柏林等竞争城市。
</p>
</div>
</body>
</html>
利用overflow:hidden解决父级边框塌陷的问题
在父级元素中增加一个overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/2.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid black;
/*此处没有定义宽度和高度，是被内容元素支撑的，因此不会出现父级边框塌陷的问题*/
overflow: hidden;
}
/*浮动float*/
.layer01{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer02{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer03{
border: 1px dashed red;
display: inline-block;
float: right;
}
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 可以浮动
*/
.layer04{
border: 1px dashed red;
display: inline-block;
float: right;
clear: both;
}
4. 父类添加一个伪类：after
在父类后添加一个空的内容，定义为块元素，并使其两侧不允许有浮动元素
好处：避免了空的div标签
#father:after{
content: ‘‘;
display: block;
clear: both;
}
小结（重要）
1. 浮动元素后面增加空div
? 简单，但是代码中应该尽量避免空的div
2. 设置父元素高度
? 简单，但是当元素假设有了固定的高度，就会被限制
3. overflow
? 简单，下拉的一些场景应避免使用
4. 父类添加伪类:after（推荐）
? 写法稍微复杂，但是没有副作用，推荐使用
5. 对比
-
display
方向不可以控制
-
float
浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题