<style> .main{ border: 5px solid #000; } .box1{ width: 400px; height: 300px; background: #128fc2; font: 50px/300px '微软雅黑'; text-align: center; color: #fff; float: left; } .box2{ width: 400px; height: 300px; background: #128fc2; font: 50px/300px '微软雅黑'; text-align: center; color: #fff; float: right; } </style>
<div class="main">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
让元素按照指定的方向发生位移,直到碰到相邻的浮动元素或者父级的边界的时候才会停下来
浮动元素:给一个元素加了浮动之后,这个元素就可以叫做浮动元素了
浮动元素会脱离文档流,不会撑开父级的高度
1. 清浮动
<style> .main { border: 5px solid #000; overflow: hidden; } .box1 { width: 400px; height: 300px; background: #128fc2; font: 50px/300px '微软雅黑'; text-align: center; color: #fff; float: left; } .box2 { width: 400px; height: 300px; background: #128fc2; font: 50px/300px '微软雅黑'; text-align: center; color: #fff; float: right; /*clear: left;!* 左边不能有浮动元素 *!*/ } </style>
<div class="main">
<span class="box1">1</span>
<div class="box2">2</div>
<br clear="both">
</div>
清浮动:清除浮动造成的影响
1,直接给父级加高度
2, <br clear="both"> 一定要加在父级的最下面
3, 给父级加浮动
4, overflow:hidden;
浮动特性:
1,可以让块元素排成一行 (并且中间没有空格)
2,可以让内联元素支持宽高
3,没有加宽度的时候,宽度默认由内容撑开
4,不会撑开父级的宽度
(1)如果可以使用固定高度,可以直接给父级添加固定高度
(2)利用<br/>达到清除浮动的效果
<br/>换行标签,会在当前位置另起一行,如果希望在当然已有内容的下一行进行 输出,可以添加一个属性 clear(可选值:left、right、all)
<br clear="all"/>
(3)使用clear属性清除浮动
clear的写法
A. clear: left;
B. clear: right;
C. clear: both;
D. clear: none;
clear的特性
- 只会对写在它前面的浮动元素起效,后面的清除不了
- 清除指定方向的浮动
- 只有添加给块标签才是有效的,并且是具有独占一行效果的块(加了浮动的不行哟)
(4)利用伪元素清除浮动
<style> .box{ border: 5px solid #9a6e3a; /*display: inline-block;*/ } .item{ width: 400px; height: 300px; background: #f9ce2e; float: left; } .fix{ *zoom:1;/* 触发haslayout(IE里面的BFC)*/ } .fix:after{ content: ''; display: block; /*display: table; 为了兼容低版本浏览器*/ clear: both; } </style>
<div class="box fix">
<div class="item"></div>
</div>
<div class="main fix">
<div class="item"></div>
</div>
<div class="first fix">
<div class="item"></div>
</div>
<!--
clear 清浮动,只能在块元素身上才有左右
Δ after给当前父级添加一个,处于最后位置的子元素(clear只对前面的元素有效)
Δ content 添加内容
Δ display:block 只有添加给块标签有效
Δ clear:both 同时清除左右方向的浮动
注:上述任何一项都不可以丢!!
(5)父级触发BFC