css 清除浮动带来的不能自动撑高内容的问题

原创于 2022-02-27 11:18:07 发布 · 246 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了在HTML布局中，当不使用浮动时，元素默认布局情况。通过示例展示了添加浮动属性后，元素如何排列以及如何影响父元素的尺寸。进一步解释了使用伪类`:after`和`overflow:hidden`来清除浮动的方法，以及这两种方法在解决浮动元素引起的布局问题上的应用。

当没有浮动时：

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

.box1 {
            width: 1000px;
            border: 10px solid red;
            margin-bottom: 5px;

        }

        .box1 p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: skyblue;
        }

效果为：

加了伪类后：

 <div class="box1 clearFix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box1 clearFix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>


 .box1 {
            width: 1000px;
            border: 10px solid red;
            margin-bottom: 5px;

        }

        .box1 p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: skyblue;
        }

        .clearFix::after {
            content: "1";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }