一、浮动元素自动变块级元素
非浮动元素占据浮动元素位置,浮动元素不能占据非浮动元素位置???向上占据
浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
<div style="height: 200px; width: 200px;">
<span style="float: left; width: 150px;
height: 150px; margin: 5px;
padding: 5px; border: solid 1px red;
background-color: Olive;">
浮动元素span
</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px;
margin: 5px; padding: 5px; border:
solid 1px red; background-color:Olive;">
非浮动元素span
</span>
</div>
二、并列关系的盒子,不一致地浮动,位置问题
元素浮动会对后面非浮动的兄弟元素产生影响
可能情况
后边若是非浮动行内元素,且因为定位产生重叠时,行内盒子模型压在该浮动元素之上
后边若是非浮动块级元素,且在定位后产生重叠时,该块级的内容围绕该浮动元素显示,其他在该浮动元素底下
示例代码如下:
<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<div style="float: left; width: 250px; height: 250px; border:
solid 1px Aqua; background-color: gray; margin: 10px 0 0 10px;">
浮动DIV
</div>
<div style="background-color: red; width: 300px; height: 150px;">
跟在浮动元素后边的DIV
</div>
<span style="background-color: red; margin: 0 0 0 -50px;">
跟在浮动元素后边的span
</span>
</div>
效果如下
不过在ie6这个效果却很怪异,如图:
浮动元素没有压在非浮动div之上,反而把span压住了。
解决办法
对被浮动影响的元素添加clear:both
三、并列关系的盒子,一致地同方向浮动,高度不一致问题
多个同方向浮动元素一般是按照流式布局,一行满了则自动换行,也就是类似于以下效果:
但各个浮动元素高度不一致的话效果很可能出现下边的情况:
原因
主要排列到元素7的时候,一行已经显示不下了,所以要换行,但此处换行并不是从行头开始,而是从元素5那开始,因为元素5比元素6高很多导致。
四、包含关系的盒子,
可能情况
里面盒子浮动,包住它的盒子不浮动时,父盒子背景无显示
原因
由于元素浮动后脱离了文档流,所以父元素是无法根据元素来自适应的。
解决办法1 clear:both
用法
在所有浮动元素后加: <div style="clear:both;height:0px;"></div>
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
(1)有clear:both的:
(2)无clear:both的
原理
子元素浮动后,因为脱离文档流,所以父元素包含不住,无法撑开。由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
解决办法2 overflow
用法
<style>
.box{
background-color: yellow;
overflow:atuo; //或者是hidden,.box是父盒子
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
原理
在父元素上设置overflow这个属性,如果父元素的这个属性设置为auto或者是hidden,父元素就会扩展包含浮动,这个方法有着比较好的语义性,因为它不需要额外的元素,但是,要记住一点,overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条。
解决办法3 clearfix类
用法
<style>
.clearfix:after{ content:""; display:table; height:0;
visibility:both; clear:both;}
.clearfix{*zoom:1; /* IE/7/6*/}
</style>
<body>
<div class="box clearfix">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
原理:
这种方式这样理解,就是利用伪类元素,也就是在有浮动的标签前面添加一个块级元素,来达到效果。