下面哪个属性不会让 div 脱离文档流（normal flow）？
position: absolute; position: fixed; position: relative; float: left;
答案为c
有些人不太理解自己太误人子弟，网上摘抄了下供大家参考。
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。【 脱离文档流即是元素打乱了这个排列】 ， 或是从排版中拿走 。
所以我们可以知道，除了 position: absolute;和 position: fixed;会直接将元素从排版中拿走从而脱离文档流之外，设置float对象也会 “打乱这个排列”从而也被称为脱离文档流。
float：right 显然就打乱了从左到右的文档流排列，而为什么说float：left也会脱离文档流呢？
我的理解是当子元素设置了float属性而父元素没有设置（或保持默认的 position:static ），则子元素会从父元素中溢出（即父元素不会根据子元素的大小进行扩大），因为当元素设置了float属性之后，其他没有设置float属性的盒子会无视这个元素，即文档流下面的没有设置浮动的元素会何其进行叠加。即可以当作其脱离了文档流，但需要注意的是，其与position：absolute不同的是，其他盒子元素内的文本依然会为float元素让出位置，围绕在周围，所以不会看到文本相互叠加的情况，而absolute定位的元素则会出现文本叠加。所以亦可以理解为脱离了文档流，这种情况通常消除浮动就可以解决。
简单的界面就是
<div class="list2">
<ul class="list-ul">
<li ><a href="/">HOME</a></li>
<li ><a href="/visit/">VISIT</a></li>
<li><a href="/exhibitions/">EXHIBITIONS</a></li>
<li ><a href="/collections/">COLLECTIONS</a></li>
<li><a href="/multimedia/">MULTIMEDIA</a></li>
<li><a href="/EXPLORE/">EXPLORE</a></li>
<li ><a href="/about/">ABOUT</a></li>
</ul>
</div>
<div class="div2">div1</div>
<div class="div3">div2</div>
一、设置float属性的父元素没有高度
/*list2*/
.list2 {
margin: 10px auto;
float: left;
}
.list2 ul {
margin: 0;
text-align: center;
}
.list2 ul li {
float: left;
}
高度为0.
二、设置float后面的元素，
.list2 {
margin: 10px auto;
float: left;
}
.list2 ul {
margin: 0;
text-align: center;
}
.list2 ul li {
float: left;
width:100px;
}
.div2{
}
.div3{
}
设置float后的hahahahah占用了他的位置，但是并没有重叠。
三、float的连续性
.list2 {
margin: 10px auto;
}
.list2 ul {
margin: 0;
text-align: center;
}
.list2 ul li {
float: left;
width:100px;
}
.div2{
clear: both;
float: left;
}
.div3{
}
特别有意思，div1下来了，div2还在上面，继续原来的float元素继续排列。
转载请注明原文地址: https://ju.6miu.com/read-962121.html
