关于浮动的小实验

最新推荐文章于 2024-06-03 11:05:37 发布

流浪的小宇

最新推荐文章于 2024-06-03 11:05:37 发布

阅读量208

点赞数

分类专栏：实践问题及解决 css基础

本文链接：https://blog.csdn.net/b150461/article/details/100531459

版权

实践问题及解决同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

css基础

14 篇文章 0 订阅

订阅专栏

做了几个关于浮动的小实验，记录一下留存

由于需要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>

结论：
在这里插入图片描述