一浮动的定义
使元素脱离文档流, 按照指定方向发生移动, 遇到父级边界或者相邻的浮动元素停了下来
ps: 文档流: 文档流是文档中可显示对象在排列时所占用的位置
语法
float 常跟属性值 leftrightnone
float:none 不使用浮动
float:left 靠左浮动
float:right 靠右浮动
二浮动的用途
可设置文字环绕或使元素宽度由内容填充 (类似 Inline-block) 使用浮动需要注意的是如果浮动的元素高度比父级容器还高, 那么需要设置父级容器的 overflow 属性为 auto, 使其自动撑满
三浮动用法
分析 html 结构:
- <div class="box">
- <div class="div1">1</div>
- <div class="div2">2</div>
- <div class="div3">3</div>
- </div>
分析 CSS 代码样式:
- .box {
- border: 1px solid #ccc;
- background: #fc9;
- color: #fff;
- margin: 50px auto;
- padding: 50px;
- }
- .div1 {
- width: 100px;
- height: 100px;
- background: darkblue;
- float: left;
- }
- .div2 {
- width: 100px;
- height: 100px;
- background: darkgoldenrod;
- float: left;
- }
- .div3 {
- width: 100px;
- height: 100px;
- background: darkgreen;
- float: left;
- }
浮动之后的影响. png
清除浮动
方法一: 添加新元素, 应用 clear:both;
- HTML:
- <div class="box">
- <div class="div1">1</div>
- <div class="div2">2</div>
- <div class="div3">3</div>
- <div class="clear"></div>
- </div>
- CSS:
- .clear {
- clear: both;
- height: 0;
- line - height: 0;
- font - size: 0
- }
效果. png
一切恢复作用啦
方法二: 父级 div 定义 overflow:auto;
- HTML:
- <div class="box">
- <div class="div1">1</div>
- <div class="div2">2</div>
- <div class="div3">3</div>
- </div>
- CSS:
- .box {
- border: 1px solid #ccc;
- background: #fc9;
- color: #fff;
- margin: 50px auto;
- padding: 50px;
- overflow: auto;
- zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
- }
结果: 也是实现了
方法三: 在父级样式添加伪元素: after 或者: before(推荐)
- HTML:
- <div class="box">
- <div class="div1">1</div>
- <div class="div2">2</div>
- <div class="div3">3</div>
- </div>
- CSS:
- .box {
- border: 1px solid#ccc;
- background: #fc9;
- color: #fff;
- margin: 50px auto;
- padding: 50px;
- }.box: after {
- content: '';
- display: block;
- clear: both;
- }
结果: 当然不用说啦
效果. png
完
来源: http://www.jianshu.com/p/5fa383bc1ce2