html css 中浮动影响与浮动问题的解决

最新推荐文章于 2023-09-20 17:46:52 发布

没错就是这

最新推荐文章于 2023-09-20 17:46:52 发布

阅读量1.5k

点赞数 4

分类专栏：前端知识文章标签： css html

本文链接：https://blog.csdn.net/m0_48839439/article/details/125977619

版权

前端知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html css 中浮动影响与浮动问题的解决

浮动

浮动就是使元素脱离文档流且块级元素在同一行显示（文档流：元素在页面中所占的位置）
浮动特性：脱离文档流，原先位置不保留，飘在文档流的上方。
给元素设置“float:属性值”的样式就会让元素随着随设置的值浮动。

一、浮动的影响

浮动对兄弟元素的影响
浮动子元素对父元素的影响

在设置两个同级div盒子时，如果对其中一个div设置浮动，便会使得两个div会交叠在一起。

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .one{
            /* 浮动特性：脱离文档流，原先位置不保留，飘在文档流的上方 */
            float: left;
            background-color: skyblue;
        }
        .two{
            background-color: greenyellow;
        }
</style>
    <body>
        <div class="one">div1</div>
        <div class="two">div2</div>
    </body>

在这里插入图片描述
子元素浮动对父元素的影响：

 <style>
        .parent{
            border: 10px solid red;
            margin: 10px;
        }
        .child{
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: skyblue;
        }
    </style>
<body>
    <div class="parent">hello css</div>
    <div class="parent FDfys">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    </div>
    <div class="parent">heelo css</div>
</body>

在这里插入图片描述
浮动子元素会脱离父元素（从上到下数第二个红色框）。

二、解决方法

1.同时设置浮动

代码如下（示例：如上面所说的对兄弟元素的影响实例）：

.two{
           /* 1.同时设置浮动 */
            float: left; 
      }

给受到影响的兄弟div也设置相同浮动，浮动影响便可解决。

2.清除浮动

代码如下（示例）：

         .two{
            /* 2.清除浮动 */
             clear: both;
           }

如是兄弟元素受到影响便给受到影响的兄弟div设置clear属性，并赋值both。
如是父级元素受到影响，可以在在浮动元素下方设置一个空的块级元素，并给此块级元素清除浮动（设置clear属性，并赋值both）。

3.伪元素清除浮动

对受到浮动影响的父元素设置后伪元素属性，并设置清除浮动，便可消除浮动影响。

   /* 2.使用伪元素清除浮动 */
         .FDfys::after{
            content: "";
            display: block;
            clear: both;
        }

4.触发BFC（块级格式化上下文）

BFC（块级格式化上下文）
1.概念：
把BFC理解成元素的一种属性（类似于id title class属性），元素拥有了这个属性，就可以理解为一个独立的渲染区域。容器内元素不会影响容器外的元素。
2.作用特性：
避免外边距重叠
避免浮动
避免元素被浮动元素覆盖
两列布局

只要给受到浮动影响的元素设置BFC，便可解决受到浮动影响的问题。

那么BFC如何触发呢？

html根元素
float不为none
绝对定位
display取值
overflow不为visible

如果我们想要解决浮动影响问题，其中一个触发bfc的方法，我们只要给受到浮动影响的元素设置overflow: hidden;

我们案例解决浮动的影响后是如图所示:
在这里插入图片描述

没错就是这

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
html css 中浮动影响与浮动问题的解决

浮动就是使元素脱离文档流且块级元素在同一行显示（文档流元素在页面中所占的位置）给元素设置“”的样式就会让元素随着随设置的值浮动。
复制链接

扫一扫

专栏目录

html css 中浮动影响与浮动问题的解决

html css 中浮动影响与浮动问题的解决

浮动

一、浮动的影响

二、解决方法

1.同时设置浮动

2.清除浮动

3.伪元素清除浮动

4.触发BFC（块级格式化上下文）

那么BFC如何触发呢？

“相关推荐”对你有帮助么？