css子元素有高度,父元素没有高度
出现这个情况是父元素只有里面的子元素都是浮动的,导致父元素的高度为0
解决:
在父元素里面,在尾巴位置新增一个空的div子元素,设置clear:both;
<div style="clear:both;"></div>
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> 测试</title>
<style type="text/css">
body {
overflow: auto; border: 8px solid black; }
.layui-col-md12 {
width: 100%; float: left; background: #4cff00; }
</style>
</head>
<body>
<!-- 这个是浮动元素 -->
<div class="layui-col-md12">
<div style="width:100%;height:400px;"></div>
</div>
<!-- 解决父级高度为0, -->
<div style="clear:both;"></div>
</body>
</html>
参考博文:
https://blog.csdn.net/cedar777/article/details/53886182