css - 浮动(float)
2017-12-24 本文已影响1人
廖马儿
在网页开发过程中，为了让块元素能在统一行上面显示，可以使用inline-block进行布局。还有没有其他的方式呢？我们今天学习浮动也可以达到这种效果。
float/文档流：
float:left | right | none | inherit;
文档流：是文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit; # 元素的某个方向上不能有浮动元素
clear:both; # 在左右两侧均不允许浮动元素
案例：
div {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
浮动也能像inline-block一样在同一行显示，并且，没有inline-block的一个问题，就是换行符会被转换为间隙。
如果向右浮动的话，是代码中第一个div最先浮动到最右边，然后是第二个div浮动到最右的第二个。
浮动（float）的特征：
1.多个块可以在一排显示
2.内联元素支持宽高
3.默认内容撑开宽度
4.脱离文档流
5.提升层级半层
1，2，3三条和inline-block一致。
清除浮动的方法
1.父级加高度（问题：扩展性不好）
2.父级也加浮动（问题：页面中所有的元素都加浮动，margin左右自动失效）
3.inline-block清除浮动的方法（问题：margin左右auto失效）
4.空标签清除浮动（问题：IE6最小高度19px。解决后IE6下还有2px偏差）
5.<br clear="all">清除浮动（问题：不符合工作中，结构，样式，行为，三者分离的要求。也就是说这样的话样式在结构中了）
6.after伪类清除浮动（现在主流方式）
7.overflow：hidden 清除浮动（问题：需要配合宽度或者zoom 兼容ie6，ie7）
overflow：scroll | auto | hidden ， overflow：hidden；溢出隐藏（裁刀！）
空标签清除浮动方式：
.clearfix {
clear: both;
}
...
<div class="box">
<div class="item">
</div>
<div class="clearfix"></div>
</div>
after伪类清除浮动：
.clearfix:after{ # 注意：伪类的冒号后面不能有空格
content: "";
display: block;
clear: both;
}
.box {
border: 1px solid red;
}
.item {
width: 200px;
height: 200px;
background-color: #222222;
float: left;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="item"></div>
</div>
