CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法

我们在设置浮动元素时往往会出现这样的现象，由于两个浮动元素宽度之和大于父元素的宽度而导致第二个浮动元素被挤到下面，就像下面这样。

<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
.parent{
    background-color: skyblue;
    height: 120px;
}
.left{
    width:500px;
    height: 100px;
    float: left;
    background-color: plum;
}
.right{
    height: 80px;
    width: 700px;
    float: right;
    background-color:yellow;
}

 

 当页面足够宽时，两个浮动元素还可以共存在一行，一旦页面缩小，就会出现此现象。究其原因是因为父元素parent未设置宽度从而继承了body的宽度，即width:100%，页面呈现多宽，父元素就多宽。

我这里的解决方法是设置父元素parent的width属性大于两个子元素的宽度之和，这样浮动的子元素就只能一直在父元素中存在。

posted @ 2019-10-31 15:42  哈密瓜小王子  阅读(5222)  评论(0)  编辑  收藏  举报