float: 浮动
特点:
- 脱离文档流(类似浮于页面上方效果)
- 虽然脱离文档流,但是下一元素仍然会把位置留出来,不会占用该位置
- 会造成父容器高度坍塌
- 使元素块级化
- 元素块级化,但是其浮动左/右侧,并不会自动填充为margin.
下面通过几段代码说明上面几个特点
第1、2、4 点说明
<style>
.float {
float: left;
<!-- a 标签可以设置宽高了,说明浮动可以使元素块级化 -->
width: 100px;
height: 100px;
border: 1px solid red;
}
.normal {
idth:200px
height: 50px;
border: 1px solid black;
}
</style>
<body>
<div id ="app">
<a class="float">
</a>
<div class="normal">我是normal</div>
<!-- 由于float浮动脱离文档流,所以normal的定位位置会忽略float 元素的存在,从起点开始。但是normal的内容会从float 元素之后开始 -->
</div>
</body>
第5点 说明
float 与normal 的右侧对比如上,浮动元素的左侧并不会自动填充为margin.
浮动引起父容器高度坍塌
<style>
.float {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div id ="app"> <!-- 父节点:app高度为0,发生了高度坍塌。 解决办法:父容器开启BFC,具体请自行百度-->
<a class="float">
</a>
</div>
</body>
其他说明
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.first {
float: left;
width: 100px;
height: 150px;
border: 1px solid red;
}
.second {
float: left;
width: 1000px;
height: 100px;
border: 1px solid black;
}
.third {
float: left;
width: 600px;
height: 100px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<a class="first"></a>
<a class="second"></a>
<a class="third"></a> <!-- 注意这个元素的浮动位置 -->
</div>
</body>
</html>