CSS – 浮动
文章目录
1. 使设置了float的元素脱离标准流（normal flow）的控制，不占位置，float后影响原本标准流的元素的位置。个人理解，标准流为flow 1，float后的流为flow 2，就像PS里面的图层1，图层2
2. 使多个div一行内显示
3. 最早用来控制图片，实现文字环绕图片的效果（如百度百科里面的）
4. 例子1. 加减注释玩一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/* float: left;*/
}
.one {
background-color: pink;
/* float: left;*/
}
.two {
width: 110px;
background-color: purple;
float: left;
}
.three {
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
5. float可以让元素默认转换为行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
float: left;
/*可以让元素默认转换为行内块元素 特性*/
}
span {
width: 150px;
height: 100px;
/* display: block;*/
background-color: purple;
float: left;
/*妙用 如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
}
</style>
</head>
<body>
<div>div</div>
<span>I am span</span>
</body>
</html>
6. 浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置
7. 清除浮动方法1，clear:both
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响
- clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响)，且父级元素的高度为已经float的子元素高度的最大值，不会为0.
洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
适用于新款车载手机支架无线器快充智能自动感应汽车
皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：18.223.158.132，归属地:俄亥俄州Dublin ，欢迎您的访问!
文章链接：https://www.lilianhua.com/css-floating.html
文章链接：https://www.lilianhua.com/css-floating.html
