css float和absolute脱离文档流的问题

最新推荐文章于 2023-12-14 21:59:37 发布

wangshang1320

最新推荐文章于 2023-12-14 21:59:37 发布

阅读量1.7k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangshang1320/article/details/88024893

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS中的布局默认是从上到下（块元素），从左到右（行内元素），有时候就需要左右排列

float

让元素浮动，以前用的比较多，在css3没出来之前这个挺好用的。让当前元素浮动，实现左右布局，部分脱离文档流，父元素高度塌陷等，给元素设置了float属性后其紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围

float：letf|right|none;

清除浮动：

clear:both|left|right; //禁止左右出现浮动元素 both：左右，left：左，right:右

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .item {
            width: 300px;
            height: 100px;
        }

        .d1 {
            background: red;
        }

        .d2 {
            background: #1f9bb1;
        }

        .d3 {
            height: 150px;
            float: left;
            background: #00294b;
        }

        .d4 {
            background: blue;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="item d1"></div>
    <div class="item d2"></div>
    <div class="item d3"></div>
    <div class="item d4"></div>
    <div class="clear"></div>
</div>
<script>

</script>
</body>
</html>

absolute绝对定位

display属性设置absolute绝对定位的元素会直接脱离文档流，并相对于上级元素（有定位属性的上级元素，如果没有会一直往上找）的位置进行位置定位，设置了这个后需要配合left，right，top，bottom一起使用。其他元素会完全无视这个元素。

wangshang1320

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css float和absolute脱离文档流的问题

CSS中的布局默认是从上到下（块元素），从左到右（行内元素），有时候就需要左右排列float让元素浮动，以前用的比较多，在css3没出来之前这个挺好用的。让当前元素浮动，实现左右布局，部分脱离文档流，父元素高度塌陷等，给元素设置了float属性后其紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围float：letf|right...
复制链接

扫一扫