子元素浮动父元素高度塌陷问题

我是你要找的bug

于 2020-05-06 16:25:21 发布

阅读量208

点赞数

分类专栏： CSS 浮动高度塌陷文章标签： css

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/105952980

版权

CSS 同时被 3 个专栏收录

8 篇文章

订阅专栏

浮动

1 篇文章

订阅专栏

高度塌陷

1 篇文章

订阅专栏

在这里插入图片描述

hellow world跑到上面去了。。。。

解决方案：

1、设定父元素高度height
2、最后一个浮动元素后加<div class=''clear''></div> 标签
并添加样式 .clear{ clear:both;}
3、最佳方案：伪元素清除浮动

<body>
<div class="parent clear">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>
<h1>helloworld</h1>
</body>

添加样式：

.clear:after{
    content:"";
    dispaly:block;
    clear:both;
}

子元素浮动 父元素高度塌陷问题

解决方案：

子元素浮动父元素高度塌陷问题