<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
background-color: lightcyan;
}
li{
border:1px solid red;
}
#demo1 li{
float: left;
}
/*
1, 父元素的高度没有明确指定的时候,是根据子元素的高度自动计算的
2,子元素浮动之后,不占标准文档流中位置,父元素只能根据未浮动的字元素计算高度,
所以,目前的高度为0,为0之后,就没有背景颜色
把子元素浮动引起的父级高度为0的现象称为 边框塌陷
*/
/*
解决父级边框塌陷
1 把高度设置为具体值,不要自动计算
2 加一个空的子元素,使用它清除浮动
3 通过伪元素来清除浮动
4 父级元素也浮动
5 使用overflow属性
*/
#demo0 li{
float: left;
}
/* 2 加一个空的子元素,使用它清除浮动*/
.clear{
clear:both;
}
/*通过伪元素来清除浮动
推荐用这种方法
*/
.clear::after{
content: ' ';
display: block;
height: 0;
clear: both;
}
/*父级元素也浮动
父元素后面的兄弟元素会忽略前面的浮动元素
*/
#demo00{
/*float: left;*/
/*使用overflow属性*/
overflow: hidden;
}
#demo00 li{
float: left;
}
</style>
</head>
<body>
<ul id="demo00" >
<li>菜单0001</li>
<li>菜单0002</li>
<li>菜单0003</li>
<li>菜单0004</li>
<li>菜单0005</li>
<!-- <div class="clear"></div>-->
</ul>
<p>
dfasdfsadfasdfdas菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005菜单0005
</p>
<ul id="demo0" class="clear">
<li>菜单0001</li>
<li>菜单0002</li>
<li>菜单0003</li>
<li>菜单0004</li>
<li>菜单0005</li>
<!-- <div class="clear"></div>-->
</ul>
<ul id="demo1">
<li>菜单0001</li>
<li>菜单0002</li>
<li>菜单0003</li>
<li>菜单0004</li>
<li>菜单0005</li>
</ul>
</body>
</html>
html -- 子元素float引用的父级边框塌陷
最新推荐文章于 2023-07-16 13:58:34 发布