float之脱离文档流

最新推荐文章于 2023-01-03 17:34:49 发布

转载最新推荐文章于 2023-01-03 17:34:49 发布

· 197 阅读

1 ·

版权

原文链接：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>