因为子元素的浮动，导致父元素的边框变成一条线

因为子元素的浮动，导致父元素的边框变成一条线，如下：

<style>
        .container{
            width: 500px;
            border: 1px solid #ccc;
        }
        p{
            float: left;
        }
</style>

<body>
    <div class="container">
        <p>1111111111111</p>
        <p>22222222222</p>
        <p>333333</p>
    </div>
</body>

 

 

解决方法1：在父元素的样式中加 overflow:auto;

 .container{
            width: 500px;
            border: 1px solid #ccc;
            overflow: auto;
}

　　

解决方法2:在父元素中加一个清除浮动的子元素div。清除左浮动：clear:left;  清除有浮动：clear:right; 清除两边浮动：clear:both;

<div class="container">
        <p>1111111111111</p>
        <p>22222222222</p>
        <p>333333</p>
        <div style="clear:left;"></div>
</div>

　　

posted @ 2023-08-01 10:46  芬-mi  阅读(22)  评论(0)    收藏  举报