做了几个关于浮动的小实验,记录一下留存
由于需要part1和part2行内元素在代码中的位置与别的部分不同,特别留意
part1
默认文档流
1:元素默认会按照文档流显示,块元素的默认文档流是独占一行,所以从上至下显示。行内元素只占本身内容的大小,按照从左到右进行显示。
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box1">1</div>/*box1在内联元素之后*/
<div class="box2">2</div>
<div class="box3">3</div>
part2
box1浮动
2:当上面第一个元素浮动后脱离原来的文档流,将会浮动后飘至其父元素的左上角(left)>
或右上角(right)。且向上移动一个图层。
其后面的元素占据其原来的位置,如果这个块元素上面有行内元素行内元素会紧
随浮动的块元素之后。而不是被覆盖。
其后面的元素将按原来的文档流显示
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box1">1</div>/*box1在内联元素之后*/
<div class="box2">2</div>
<div class="box3">3</div>
part3
仅box2浮动
3:如果只是第二个元素浮动,则它将脱离文档流,浮动直到碰到其它浮动元素,或者上方的兄弟块元素。
它的浮动不会超过与它相邻的上个兄弟元素,最多与其平行。与它相邻上面的行内元素会紧随其后,而不是被覆盖。
文本元素不会被浮动元素覆盖,尽量显示出来。
<div class="box1">1</div>/*注意将box1移动到一层*/
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
part4
仅box3浮动
4:只有最后一个块元素左浮动(后面没有别的元素了),会没有效果。右浮动与part3结论相同。
<div class="box1">1</div>/*注意将box1移动到一层*/
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
part5
box1 box2 box3同时浮动
<div class="box1">1</div>/*注意将box1移动到一层*/
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
5:内联元素下方的块元素如果浮动,浮动元素+内联元素 不满一行内联元素将会紧跟下一个浮动元素之后显示。如果>还有块元素浮动将会浮动至内联元素下方。
part6
box1 box2浮动
<div class="box1">1</div>/*注意将box1移动到一层*/
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
part7
box2 box3浮动
```css
<div class="box1">1</div>/*注意将box1移动到一层*/
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
全部代码:
`
<!doctype html>
<body>
<div class="box1">1</div>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<span class="word">这是一行文字!!</span>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
`
结论: