float之脱离文档流

最新推荐文章于 2023-07-20 11:01:37 发布

weixin_30323961

最新推荐文章于 2023-07-20 11:01:37 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/yangwu-183/p/7473958.html

版权

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

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

只有绝对定位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。

转载于:https://www.cnblogs.com/yangwu-183/p/7473958.html

weixin_30323961

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
float之脱离文档流

所谓的文档流：指的是元素在排版过程中，元素自动从左到右，从上到下的顺序排列。脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位只有绝对定位absolute和浮动float才会脱离文档流。使用float脱离文档流时，其他盒子会无视这个元素（完全无视），但其他盒子内的文本依然会为这个元素让出位...
复制链接

扫一扫