css子元素有高度,父元素没有高度

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

猜你喜欢

转载自blog.csdn.net/u011511086/article/details/132413686