The css child element has a height, but the parent element has no height.
This situation occurs because only the child elements inside the parent element are floating, causing the height of the parent element to be 0.
Solution:
In the parent element, add an empty div at the tail position. Element, set clear:both;
<div style="clear:both;"></div>
Complete code:
<!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>
Reference blog post:
https://blog.csdn.net/cedar777/article/details/53886182