解决父元素塌陷以及子div的margin-top会将父元素往下拉的问题

WEB前端开发 专栏收录该内容
20 篇文章 0 订阅

父元素塌陷

解决父元素塌陷:(清楚浮动带来的危害)
1.给父元素设置高度(不能消除危害,一般不用)
2.给父元素设置一个最小的儿子(添加一个空白div)给儿子设置clear both
可以设置一个伪类选择器:

.clearDiv :after{
    content: '';
    display: block;
    clear: both;
}
<div id="mydiv " class="clearDiv">
 <div id="mydiv1"></div>
 <div id="mydiv2"></div>
 <div id="mydiv3"></div>
 <div id="mydiv4"></div>
   <!-- <div id="clear"></div>-->
</div>

3.给父元素设置overflow:hidden(溢出隐藏)
4.给父元素设置after 给after设置clear:both
5.只要浮动了,就去检查父元素,如果塌陷就立即清除浮动

子div的margin-top会将父元素往下拉

在没有设置浮动的情况下,如果设置子div的margin-top会将父元素往下拉。
解决办法:

  1. 给子元素浮动
  2. 给父元素添加overflow
  3. 给父元素添加一个内容(&nbsp或者内容)
  4. 给父元素一个上内边距
  5. 给父元素一个边框
  • 0
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值