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

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
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值