float之脱离文档流

所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列。


脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位


只有绝对定位absolute和浮动float才会脱离文档流。


使用float脱离文档流时,其他盒子会无视这个元素(完全无视),但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视)。


(1)使用float实现文本环绕效果(文字部分无视,此时浮动元素虽然脱离文档流,但任然占据空间)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>

(2) 盒子元素完全无视浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
.bro{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
</div>
</body>
</html>

(3) 盒子中的文字部分无视,但盒子本省完全无视

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:200px;
height:200px;
background-color: blue;
float:left;
}
.bro{
width:300px;
height:300px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
文字部
</div>
</body>
</html>

而对于使用absolute position脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!


  常用清除float副作用 :在父元素中的所有子元素的最后添加带有clear:both;属性的元素可以清楚浮动,使得父元素具有高度。

<div style="clear:both;"></div>

    注意:对盒子里的元素使用float属性时注意父元素的宽度设置,高度可以设为auto。

上一篇:ORA-19502: write error on file "", blockno (blocksize=)/linux下磁盘空间满了解决办法--Virtualbox


下一篇:Jmeter干货 不常用却极其有用的几个地方