css浮动

最新推荐文章于 2024-07-18 22:26:13 发布

王大眼睛�

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量47

点赞数

分类专栏： # css 文章标签： css 前端

本文链接：https://blog.csdn.net/pong_dong/article/details/131769757

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章详细阐述了CSS中的流的概念，包括文档流和文本流，以及浮动元素如何影响布局。浮动本质用于实现元素并排，但会导致父元素高度塌陷问题。BFC（BlockFormattingContext）被提出作为解决方案，创建BFC可以防止内部元素影响外部元素布局。最后，文章提到了清除浮动的几种方法，以防止对后续元素造成影响。

摘要由CSDN通过智能技术生成

一、流的概念

文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱出文本流。

二、浮动

浮动的本质：用来实现并排的效果
浮动使用的要点：要浮动，并排的盒子都实现浮动
父盒子要有足够的宽度，否则子盒子会掉下去

三、浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素
如下图所示：3号盒子会掉到2号盒子的下面
在这里插入图片描述

四、浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签

五、右浮动

在这里插入图片描述

六、使用浮动的注意事项

垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动
“大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动
div是免费的，不要节约盒子

七、BFC规范

BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
观察下面的例子

在这里插入图片描述

执行结果

出现以上问题的原因
一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
这个盒子没有形成BFC
解决办法
给父元素设置：position：absolute
如何创建BFC？
float的值不是none
position的值不是static或者relative
display的值是inline-block、flex、inline-flex
overflow：hidden

八、清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响
方法一：父元素添加 overflow：hidden
方法二：给后面的父盒子设置 clear：both 属性 – 会导致margin失效
方法三：使用::after 伪元素给盒子添加最后一个子元素，并给 ::after设置 {content:“”;clear：both;displa:block;}
方法四：在两个父盒子之间隔一个携带clear：both的空盒子。

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clearfix::after {
            content: '';
            clear: both;
            display: block;
        }
        
        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>

    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
</div>

王大眼睛�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css浮动

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。方法三：使用::after 伪元素给盒子添加最后一个子元素，并给 ::after设置 {content:“”;clear：both;BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动。浮动使用的要点：要浮动，并排的盒子都实现浮动。
复制链接

扫一扫

专栏目录