Css - float布局
2019-10-20 本文已影响0人
ElricTang
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位 相反）。
| float取值 | 描述 |
|---|---|
| left | 往左浮动 |
| right | 往右浮动 |
| none | 不浮动 |
| inline-start | 表明元素必须浮动在其所在块容器的开始一侧 |
| inline-end | 表明元素必须浮动在其所在块容器的结束一侧 |
- 浮动布局下会把行内元素转化为块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:400px;
height:200px;
border:1px solid black;
}
span{
width:50px;
height:50px;
background-color: green;
float:right;
}
</style>
</head>
<body>
<div class="box">
<span>hello world</span>
</div>
</body>
</html>
- 本来不能设置宽高的行内元素
span在用了浮动后可以设置宽高了。
- 浮动会将元素脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid black;
}
span{
width:50px;
height:50px;
background-color: green;
float:left;
}
p{
background-color: red;
line-height: 100px;
margin:0;
}
</style>
</head>
<body>
<div class="box">
<span>我向左浮动了</span>
<p>我没有浮动</p>
</div>
</body>
</html>
-
span向左浮动，p没有浮动。 -
span脱离了文档流，所以后面的p摆放时忽略了span，但是文本还是会环绕在span外面。
如何清除浮动？
场景：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid yellow;
width:300px;
}
.box div{
width:50px;
height:50px;
}
.item1{
background-color: red;
float: left;
}
.item2{
background-color: green;
float: right;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
<p>hello world</p>
</body>
</html>
因为浮动脱离文档流，父容器的高度塌陷。
-
clear:both清除所有浮动（注意需要block元素clear:both才有效）
- 伪元素+
clear:both
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid yellow;
width:300px;
}
.box div{
width:50px;
height:50px;
}
.box::after{
content: '';
display:block;
clear: both;
height: 0;
width:0;
}
.item1{
background-color: red;
float: left;
}
.item2{
background-color: green;
float: right;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
<p>hello world</p>
</body>
</html>
- 额外空标签+
clear:both
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid yellow;
width:300px;
}
.box div{
width:50px;
height:50px;
}
.item1{
background-color: red;
float: left;
}
.item2{
background-color: green;
float: right;
}
p{
background-color: blue;
}
div .clear{
clear:both;
width:0;
height:0;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="clear"></div>
</div>
<p>hello world</p>
</body>
</html>
- 父容器
overflow:hidden，触发BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid yellow;
width:300px;
overflow: hidden;
}
.box div{
width:50px;
height:50px;
}
.item1{
background-color: red;
float: left;
}
.item2{
background-color: green;
float: right;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
<p>hello world</p>
</body>
</html>
清除浮动后效果：
