关于CSS中浮动的知识点、清除浮动⽅法及⼏道⾯试题总结⽂章⽬录
⼀、知识点
float参数值：
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边
float只针对html标签设置靠左靠右浮动样式，要与⽂字内容靠左( text-align:left)靠右( text-align:right)样式区别开。注意浮动的四个性质：
浮动元素脱标，能设置宽⾼、能做并排；
浮动元素互相贴靠，若有⾜够的空隙会贴最近的元素上⾯
浮动元素有字围效果，浮动元素能挡住盒⼦，但挡不住盒⼦⾥⾯的⽂字
浮动元素有收缩效果，⼀个浮动的元素若没有设置宽，则会⾃动收缩为⽂字的宽度（类似⾏内元素的性质）
1、字围效果，及float与定位⽐较，上图说明
结论：
元素同时设置了浮动和绝对定位，则浮动是没有效果；
定位了的元素永远能压住没有定位的元素，即上⾯的解释：绝对定位能压住浮动的元素
注意： 如果元素同时设置了浮动和绝对定位，则浮动是没有效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
.big-box{
width: 600px;
height: 600px;
background-color:pink;
position: relative;
}
.sm-box{
width: 100px;
height: 100px;
}
.box1{
float: left;
position: absolute;
background-color: green;
}
.box2{
background-color: yellow;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class='big-box'>
<!-- <p>1、2两个div盒⼦都没有浮动，占了两⾏，各占⼀⾏。</p> -->
<!-- <p>1浮动，则2号盒⼦就是标准流中的第⼀个盒⼦，会跑到1号盒⼦下⾯；虽然1号能挡住2号盒⼦，但挡不住2号盒⼦⾥⾯的⽂字</p> -->
<!-- <p>接上图，若2号盒⼦⽐1号⼤，则字围效果如下：</p> -->
<p>若对1号盒⼦再设置绝对定位，则⽆字围效果(字都被压在下⾯)：</p>css布局左边固定右边自适应
<div class='box1 sm-box'>我是1号盒⼦</div>
<div class='box2 sm-box'>我是2号盒⼦</div>
</div>
</body>
</html>
⼆、清除浮动⽅法
原因：使⽤了float 浮动属性，会导致⽗级对象盒⼦不能被撑开；由于⽗级元素没有被撑开，则⽗级元素设置的背景颜⾊、图⽚或边框样式或margin padding等都⽆法正确显⽰。
如下，⽗级盒⼦边框为红⾊实线2px，且背景⾊为pink，⾥⾯有两个⼦盒⼦分别进⾏左浮动和右浮动，由于浮动不能撑起⽗级元素的⾼度因此⽗盒⼦不能正确显⽰：
<body>
<div class='big-box'>
<div class='box1 sm-box'>我是left盒⼦</div>
<div class='box2 sm-box'>我是right盒⼦</div>
</div>
</body>
清除浮动⽅法：
1. 给⽗级元素加⾼度（不推荐使⽤，它只适合⾼度固定的布局，⼀般⽗盒⼦都是为由内容撑起来）
2. 在结尾处添加空div标签clear:both。具体做法：添加⼀个div标签并定义⼀个cl的类名，给cl类名添加样式clear:both，将该div标签放
到⽗元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
到⽗元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
3. 给⽗级元素定义 overflow:hidden（推荐使⽤，缺点：不能和position配合使⽤，因为超出的尺⼨的会被隐藏）
4. 给⽗级div定义伪类：after和zoom（推荐使⽤）
/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后⽗级元素添加clearfloat类名即可
5. 给⽗级元素添加overflow:auto（缺点：内部宽⾼超过⽗级div时，会出现滚动条）
6. 给⽗级元素添加浮动（缺点：会产⽣新的浮动问题）
7. 给⽗级元素添加display:table;
其中5、6、7都不推荐使⽤，了解即可
具体代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。