深入学习前端开发笔记4--浮动引起的问题和解决办法

最新推荐文章于 2023-08-01 11:39:33 发布

原创最新推荐文章于 2023-08-01 11:39:33 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中浮动元素对父元素高度的影响，解释了为何浮动元素可能无法撑开父元素，并提供了多种解决方法，包括使用clear:both、伪元素和overflow属性，帮助开发者避免布局混乱。

首先看一个例子：

    <style>
        .parent{
            background: bisque;
            min-height: 20px;
            max-width: 500px;
            margin-top: 30px;
        }
        .child1{
            width: 200px;
            height: 200px;
            background: blueviolet;
        }
        .child2{
            width: 200px;
            height: 200px;
            background: green;
        }

    </style>
</head>

<body>
<div class="parent">

    <div class="child1">
    </div>
    <div class="child2">
    </div>
</div>

运行结果如下：

可以看到父元素被子元素撑开。

如果我们将子元素child1设置为浮动元素，看一下运行结果:

可以看到child1并没有占据父元素的高度.

如果改为将child2设置为浮动元素，运行结果如下：

可以看到内联元素parent文字紧跟在浮动元素的后面。

由此我们可以得出结论：1、如过浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0

2 、浮动元素后面的同级元素如果是非浮动元素，会影响其布局方式；

解决办法：

1.clear:both

1.1在最后一个浮动元素后面添加属性为clear:both;的元素。

  .parent{
            background: bisque;
            min-height: 20px;
            max-width: 500px;
            margin-top: 30px;
        }
        .child1{
            width: 200px;
            height: 200px;
            background: blueviolet;

        }
        .child2{
            width: 300px;
            height: 300px;
            background: green;
            float: left;

        }
        .child3{
          clear: both;

        }

    </style>
</head>

<body>
<div class="parent">

    <div class="child1">child1
    </div>
    <div class="child2">child2
    </div>
    <div class="child3">
    </div>
    parent

</div>

可以看到消除了后面对非浮动元素的影响,并且可消除对与父元素同级的非浮动元素的影响。

1.2 给父元素添加clear:both;属性的:after伪元素。

        .clear:after{
                       content: '';
                       display: block;
                       clear: both;

                   }
<div class="parent clear">

此方法可消除对与父元素同级的非浮动元素的影响，但不能消除浮动子元素对其他非浮动子元素的影响。