<!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>