Home > Article > Web Front-end > Tips for clearing floats between css elements of the same level

Tips for clearing floats between css elements of the same level

无忌哥哥Original: 2018-06-29 09:21:552242browse

清除左浮动:该元素的左边不允许出现浮动元素而当前它的左边有浮动元素,而自己本身又是块元素,只能掉到下一行首开始显示

clear: left;

清除右浮动:与上面相同,不允许元素的右边出现浮动元素,同样它只能在右浮动元素下面另起一行显示,当然,它也只能沿着右浮动的最下面的底边为起始点,开始显示

clear: right;

如果该元素的左右二边都禁止出现浮动元素,可以使用以下简写

clear:both;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.同级元素之间的清除浮动的技巧</title>
<style type="text/css">
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
            /*设置左浮动*/
            float:left;
        }
        .box2 {
            width:250px;
            height: 250px;
            background-color: lightgreen;
/*设置右浮动*/
            float:right;
        }
        .box3 {
            width:300px;
            height: 300px;
            background-color: lightcoral; /*珊瑚色*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

The above is the detailed content of Tips for clearing floats between css elements of the same level. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The principle of css floatingNext article：The principle of css floating

See more

Tips for clearing floats between css elements of the same level

Related articles