认识什么是浮动
浮动会使元素【脱离文档流】并按照【指定的方向】排列,
直到遇到父元素的边界或另一个浮动元素【停止】
文档流 文档中所有可见元素的排列占位
默认
块元素从上向下排列
内联元素从左向右排列
float:
left左浮动 从左向右排列元素
right右浮动 从右向左排列
none不浮动(默认)
浮动元素特性
1.脱离文档流(不再占原来位置)
2.提升层级(覆盖关系)
//css
div{width: 100px;height: 100px;float:left;}
//html
<div class="box3"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box3"></div>
浮动的问题
浮动会使元素脱离文档流,引起父元素高度塌陷(无法撑开父元素)
影响后续布局
解决方法
解决方法(清浮动)
1.给父元素 固定高度
缺点:
不够灵活
2. 在浮动元素最后加一个不浮动,空的,块元素{ clear:both;}
clear:both;不允许元素左右两侧出现浮动元素(两侧抗浮动)
缺点:
结构冗余 代码可读性差
3. .clearfix加给浮动元素的父元素(推荐方法)
.clearfix:after{content:"";display:block;clear:both;}
4. 父元素 overflow:hidden/auto/scroll
缺点:
存在溢出内容发生隐藏(显示滚动条等)隐患
//给父元素高
.wrap{background: #ccc;border:5px solid #000;height: 100px;}
//添加一个空元素,不浮动
.wrap{background: #ccc;border:5px solid #000;}
.box{float:left;width: 100px;height: 100px;background: red;}
.clearDiv{clear:both;}
// 伪类
.clearfix{*zoom:1;}
/* 处理兼容 */
.clearfix:after{content:"";display:block;clear:both;}
.wrap{background: #ccc;border:5px solid #000;}
.box{float:left;width: 100px;height: 100px;background: red;}
// overflow
.wrap{background: #ccc;border:5px solid #000;overflow:auto;}
.box{float:left;width: 100px;height: 100px;background: red;}
<div class="wrap clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearDiv"></div>
</div>
浮动的总结
浮动元素特性
1.脱离文档流(不再占原来位置)
2.提升层级(覆盖关系)
3.会使未定义宽度的块元素适应内容
4.不会出现margin值叠加
5.浮动引起文本绕排(脱离文档流不脱离文本流)
内联元素支持宽高
float:left right
display:block inline-block
clear的作用
clear:
left 抗左浮动
right 抗右浮动
both 抗左右浮动