关闭

元素脱离普通文档流后特点及问题总结

标签: 前端
234人阅读 评论(0) 收藏 举报
分类:

在使用float,position:absolute | fixed属性之后元素会脱离普通文档流,与inline-block和position:relative不同,后两者还在普通文档流中。

对于行内元素来说,允许行内元素使用原本不能使用的width,height,margin-topmargin-bottompadding-toppadding-bottom属性。

元素脱离普通文档流后其他元素定位会将其视为不存在,尤其是对于没有设置高度且所有子元素脱离后的父元素,父元素高度将变为0

红色浮动前 红色浮动后,绿色div高度为0消失

*{margin: 0;padding: 0;}
.content{width: 100px;background: green;}
.float{width: 50px;height: 50px;background: red;}
.float{float: left;}
.test{width: 100px;height: 100px;background: yellow;}
<div class="content">
	<div class="float"></div>
</div>
<div class="test"></div>
怎么解决这种问题呢?

1.给外层content设置高度,但是这种方法很死板,并不好用

2.在content父元素中加入.content{overflow: hidden;}

3.在所有浮动元素后面加入<div style="clear: both;">

<div class="float"></div>
<div style="clear: both;"></div>
上面三种方法都可以让消失的父元素重新定位。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4219次
    • 积分:111
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条