HTML5 CSS浮动的使用以及注意事项_html浮动注意事项-CSDN博客

本文链接：https://blog.csdn.net/qq_42420262/article/details/104451457

浮动

网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的摆放盒子的方式有3种：普通流（标准流即我们所说的文档流）盒子模型、浮动和定位。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的特性

加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。下面会具体进行讲解：

本篇所涉及的知识内容

普通流（即文档流）

浮动介绍

浮动的特性

浮动实现常见的布局方式

清除浮动的影响

文档流

普通流（文档流）实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现意外外的情况叫做普通流（文档流）布局。

浮动的介绍

为什么需要浮动？

浮动的目的，就是为了更好的实现排列布局。在标准流中，也可以实现排列布局，但是存在问题，比如三个div盒子怎么横排一列？

标准流实现代码：

将块状变为行内元素;
在这里插入图片描述

                                  有空隙

浮动实现代码(固定宽高)：

在这里插入图片描述

                             无空隙

浮动的使用方式

语法	作用	示例
float: left;	左浮动	div {float: left;}
float: right;	右浮动	div {float: right;}

浮动的特性

特点一：脱离文档流

在这里插入图片描述

红色的盒子脱离了文档流，就不会占据位置了，所有在下面蓝色盒子文档流就会上去

特点二：浮动找浮动

浮动找浮动（一定是多个连续浮动的盒子）。
浮动的元素都会在一起

特点三：多个浮动的元素，以顶部基准对齐

多个浮动的元素（一定是多个连续浮动的元素）,不管浮动元素的高是否相等，都以顶部基准对齐。

浮动会改变元素的显示模式

浮动后的元素变成了行内块元素。
在这里插入图片描述

       浮动之后，宽和高也生效了，并且没有换行

文字会环绕浮动元素

清除浮动的影响

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动的影响。

清除浮动的影响方法

方法一:给父元素加宽高（不推荐）

缺点：在实际开发中，对于显示的内容的区域，一般情况高度不能写死，因为内容显示的数量不确定。所以对于内容区域显示的高度，应当由内容自适应。（修改起来非常不方便）
前面例举过

方法二:样式属性clear（不推荐）

内隔墙法：在父元素的内部最后一行设立一道墙（设立一个div）对所设立的墙，添加一个样式属性clear:both;外隔墙法：在父元素外部设立一道墙（设立一个div）对所设立的墙，添加一个样式属性clear:both;
第一个div浮动了（如：float:left），第二个不浮动(加上：clear:left)
注：上面采用了什么浮动方式，就清除什么样的（在不浮动的元素后添加clear属性）
缺点：每次清除浮动都要加一个标签，当一个页面清除浮动比较多时，冗余的标签也会越来越多。文件就会越来越大，传输的速度相对来说越来越慢，影响程序的性能。