关于高度自适应情况下的外边距

在盒子高度自适应 若盒子内的子元素左右浮动,那么这个盒子后面的兄弟元素会向上浮,且即使在这个兄弟元素清理浮动后,它的上面的外边距也不能正常生效(但外边距大到一定程度之后 上外边距会起一定的作用)。

解决方法1 给这个盒子加个固定的高度 在子元素只在父元素内浮动,不会干扰父元素的兄弟元素,后面的兄弟元素就不会再向上浮动,外边距也能正常使用!

解决方法2在这个盒子后面添加一个隐藏的空盒子 让这个空盒子清理浮动,从而再后面的盒子既不会向上浮动,且外边距就能正常使用。

.clearfix:after {

content: '.';

display: block;

clear: both;

height: 0;

visibility: hidden;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,690评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,916评论 0 6
  • 1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合并:外...
    进击的阿群阅读 4,551评论 1 2
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 4,419评论 0 4
  • 血缘是什么?打都打不断的亲情!亲子相互之间,兄弟姊妹亲密无间不足为怪。可是,还有一种无需言语,倾情付出,不计代价的...
    像话读书爻阅读 4,191评论 0 9

友情链接更多精彩内容