<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1。只会影响后面的元素（当有三个盒子，给中间盒子设置浮动后，最后一个盒子往上浮动）
2.主要给块元素添加，也可以给内联元素添加（block（块），inline(内联)）
3.换行排列（当body宽如果是300，给三个盒子设置浮动后（宽度为五百），盒子则换行排序）
4.默认宽度根据内容决定（给div元素设置背景色后，宽度没有设置，则会根据父级的宽度去展示，当设置浮动后，则根据块元素的内容去展示）
5.内容默认提升半层（当最后一个盒子浮动到上一个盒子后，最后一个盒子的文本内容不会被第二个盒子遮挡），可以实现图文混排
-->
<style>
body{
width: 300px;
height: 300px;
border: 1px solid red;
}
#float_01{
width: 100px;
height: 100px;
background-color: #0000FF;
}
#float_02{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#float_03{
width: 130px;
height: 130px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div id="float_01">1</div>
<div id="float_02">2</div>
<div id="float_03">333333333333333333</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
清除浮动的方法:
网页中有两个盒子，给第一个盒子设置浮动后，第二个盒子则会顶上去，要解决这样的办法可以使用以下方法：
1.上下排列：使用clear属性清除，值：left（左清除） right（右清除） both（全部清除）
2.嵌套排列：
网页中有两个盒子，给父盒子盒子设置宽度，但不设置高度，给子盒子设置宽度和高度，此时父元素的高度跟随子元素，但给子盒子加上浮动后，则父盒子不会在跟随子盒子的高度,解决方法如下：
1.给父盒子宽度，但是不推荐使用，因为容易把高度写死，不适合左自适应效果
2.给父盒子也设置浮动元素，但是会影响子盒子的内容
3.给父盒子加上属性值：overflow：hidden，如果子元素内容想要溢出，则会受到影响
4.给父盒子加上属性值：display:inline-block,转化为内联
5.添加空标签，不推荐，因为每次使用都要多加一个div
6.比较推荐，写法，使用after添加个空元素，在使用属性清除浮动，在将内联元素转化为块元素
.float_5:after{
content: ''; /* 添加空字符串内容 */
clear: both;/* 清除左右浮动，转化为内联元素，clear属性只回操作块标签，对内联没用 */
display: block;/* 转化为块元素 */
}
-->
<style>
/* #float_01{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left;
}
#float_02{
width: 100px;
height: 100px;
background-color: red;
clear: left;
} */
/* #float_03{
width: 200px;
height: 300px;
border: 2px solid #FF0000;
}
#float_04{
width: 100px;
height: 300px;
background-color: #0000FF;
float: left;
} */
#float_05{
width: 200px;
border: 2px solid red;
}
.float_5:after{
content: ''; /* 添加空字符串内容 */
clear: both;/* 清除左右浮动，转化为内联元素 */
display: block;/* 转化为块元素 */
}
#float_06{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left;
}
</style>
</head>
<body>
<!-- <div id="float_01">1</div>
<div id="float_02">2</div> -->
<!-- <div id="float_03">
<div id="float_04">4</div>
</div> -->
<div id="float_05" class="float_5">
<div id="float_06">2</div>
</div>
</body>
</html>
