CSS—浮动定位

最新推荐文章于 2024-07-26 21:34:02 发布

冯佳兴

最新推荐文章于 2024-07-26 21:34:02 发布

阅读量323

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/fjxcsdn/article/details/86663425

版权

12 篇文章

订阅专栏

一、什么是定位

指的是改变元素在页面中默认的位置。

**普通流定位（默认定位方式）又称为"文档流定位"**
每个元素在页面中都有自己的空间
每个元素默认都是在其父元素的左上角开始出现
页面中的块级元素都是按照从上到下的方式逐个排列，每个元素独占一行
页面中的行内元素以及行内块元素都是按照从左到右的方式来排列的
问题：如何能够让多个块级元素在一行内显示？——用浮动定位

**浮动定位特征**
元素将被排除在文档流之外(脱离文档流)，不再占据页面的空间，其它未浮动元素要上前补位
浮动元素会停靠在其父元素的左边或右边，或其它已浮动元素的边缘上
浮动元素只能在当前行浮动
浮动定位解决的问题：让多个块级元素在一行内显示

**浮动定位语法**
属性	float
取值	none：默认值，即无任何浮动效果 left：左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮动元素 right：右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素

效果展示及其解析：

当d1进行左浮动时，在原来的位置的上空（相当于飘了起来），d2上前补位，在d1的下面,d3上前补位，占掉d2的位置。

为了表示明显，我更改一下尺寸

当d2进行左浮动时（他应该去d1的位置，），发现d1的位置已经有d1（且d1没有浮动），只能在d2的位置进行浮动（漂浮在d2位置上空），此时d3上前补位，在d2的位置。

d3进行左浮动，去d2的位置，d2正在占用，所以只能在原来位置上空漂浮。

当d2进行左浮动时，他应该浮动到d1的位置，可是d1没有浮动，只能在原来位置浮动，当d3进行左浮动时，发现自己左浮动的位置，d2正在做浮动，所以只能在d2的右边进行浮动。

浮动元素会停靠在其父元素的左边或右边，或其它已浮动元素的边缘上

当三者都进行左浮动时，d1在自己原来的上空漂浮，d2想去d1的上空，发现被占用，在d1右面，相应的d3在d2的右面

**浮动引发的特殊效果（重点）**
当父元素显示不下所有已浮动子元素时，最后一个将换行，但是，有可能被卡住
元素一旦浮动起来后，宽度将以内容为主(未指定宽度情况下)如下图：d1没有指定宽度和长度，默认大小为d1的内容大小
元素一旦浮动起来后，将变为块级元素允许修改尺寸能正常处理垂直方向外边距
文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而会巧妙的避开浮动元素

元素一旦浮动起来之后，就会对后续的元素带来一定的位置影响(后续元素要上前占位)，如果后续元素不想被影响的话(不想占位)，那么就可以通过清除浮动的方式来解决

**属性：clear**
取值	none：默认值，不做任何的清除浮动操作 left：清除当前元素前面元素左浮动所带来的影响 right：清除当前元素前面元素右浮动所带来的影响 both：清除当前元素前面元素任何一种浮动所带来的影响

效果展示：如果d3不受d2左浮动的影响，则使用clear属性，清除d2浮动所带来的影响。