<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float浮动的注意事项--浮动的子元素不能撑开父元素的高度</title>
</head>
<style>
.box{
width:900px;
background:#f00;
height:100px;
}
.box div{
width:100px;
height:100px;
float:left;
}
.s1{
background:pink;
}
.s2{
background:#00f;
}
.s3{
background:#ff0;
}
.box1{
width:900px;
height:200px;
background:#0f0;
}
</style>
<body>
<div class="box">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
<div class="box1"></div>
</body>
</html>
显示结果如下：
解释一下：
以上代码中，我们给第一个父级div中的三个子级div设置了左浮动，浮动后父级div中的三个子级div的高度超过了父元素div，即，无法撑开父元素的高度。
下面的第二个div与第一个父级div是同级元素，它依然位于第一个父级div的下方。
float浮动的元素高度也不会占用下方元素的空间，它们是浮起来的，即：脱离了标准流，在标准流的上层。
|
窥视卡
雷达卡
发表于 2023-2-1 12:45:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 07:22:25
