CSS浮动与定位

最新推荐文章于 2024-04-22 21:55:14 发布

农夫阿才

最新推荐文章于 2024-04-22 21:55:14 发布

阅读量406

点赞数 1

分类专栏： # CSS 文章标签： css浮动 css定位浮动规则

本文链接：https://blog.csdn.net/weixin_42512488/article/details/98486282

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

- 布局

布局

1. 浮动 float

浮动的概念和实例

float是css中的定位属性，用于设置标签对象（如：div标签盒子，span标签、a标签、em标签、html标签）的浮动布局。从其操作的标签上可知，所有的HTML元素都是支持浮动的。浮动后的元素display属性变为block
浮动也就是我们所说标签对象浮动居左(float:left）靠右(float:right)。浮动框可以向左或者向右移动，直到它的外边缘碰到body边框或者另一个浮动框的边框为止。（原则之一）
只要设置了浮动，元素就脱离了文本流，由于浮动框不在文档的普通流中，所以文档普通流中的块框表现的就像浮动框不存在一样。
练习：
在文本流（同一平面）：
注意标准流中，文字要在背景的上面一层，因为能看到文件，所以证明背景是在下面一层的。HTML标签的生态系统。

让box1浮动：

注意：如果说box1浮动起来之后，脱离了文档流，那么box1的背景、文档，向上浮动一层。box2的背景自然就藏在了box1的下面，文字不会，因为浮动一层，所以背景和文字是同级，是挡不住文字的。而box2的文档和box1的背景是同级，所以box2被box1的背景顶在了下面

很明显box1的背景和box2的文本在一层
浮动什么时候停靠？
遇到浮动的block元素，遇到文档流边界。

清除浮动影响

在这里插入图片描述

给p标签加上背景，看p元素所占的位置：

可以发现浮动对P标签造成了影响，注意是后续盒子。

清除浮动

虽然清除了浮动，但是P标签默认有16的外边距，这是浏览器的默认行为。但是我们可以看到，这个外边距没有起作用，塌陷进去了。无论设置多大都会塌陷进去。
这个浮动是不能给p标签设置外边距，因为外边距的高低是由内容决定的，内容的多少，无法确定，所以不能固定。要想撑开可以使用内边距。
- 解决方法二：加一个br标签来清除浮动：
- 解决方法三：

在这里插入图片描述

子盒子浮动，父盒子缩为0；说明父盒子的高度如果不自己设置，是由内容撑高的。如果子盒子浮动是撑不起高度的。因为不在同一层，如果父盒子浮动起来，就又重新变为同一层，所以能撑起来
加一段文本：
在这里插入图片描述
overflow:hidden;重新计算高度后：

原理：box2和box3是box的两个子标签。当两个子标签浮动起来之后，浏览器要重新计算他们的高度，当计算出来高度后，赋予box对应高度。这个其实叫设置固定高度，是浏览器二次刷新时进行的。
父盒子又变为了120像素，注意这个只能是浮动用，定位用没有效果。因为他们两个就不是一个层级的东西。

浮动的几个特性

必须停靠的边的元素display属性必须是block；
a元素（内联元素）靠不住

内联块元素也靠不住：

只有块元素靠得住：

或者让内联元素浮动自动转换成为块，但此块非彼块，它的宽和高如果不设置是自动的，并不会占满整行。

如果内联元素浮动，那么内联元素会自动转换为block元素，可设置宽和高。

如果父元素的宽高未设置，那么父盒子将继承父元素的宽度，而高度只能由内容撑开。

如果子元素浮动，父元素不浮动，而父元素高度未设置，那么标签和背景都属于地面级别元素，子元素的背景就高于了父元素的背景和标签本身，自然撑不开了。父元素就会缩回去

如果父元素浮动，就变成了行内块元素，宽度就不继承了，也是自动撑开，而又和子元素变为了同级：

如果父元素只要有了宽高，那么子元素就会停靠。

不管子元素浮不浮动，它都会向它的父元素看起，前提是父元素需要有高度，这个高度如果是子元素撑起来的话，那么子元素浮动之后，父元素就没有高度，变为0，这时就没办法向父元素看起了。但凡有高度，子元素就不能逃出父元素，必须向父元素看起
浮动元素的外边界不能超过其浮动包含块的内边界。
如果说浮动元素外有父元素，那么父元素就是浮动元素的边界。浮动元素不可能超出父元素的内边距。
浮动元素的外边界是另一浮动元素的外边界。
也就是说浮动元素之间不能覆盖，浮动元素的边界可以是另一个浮动元素的停靠点。
浮动元素的顶端不能比之前出现的浮动元素的顶端更高。
浮动元素从上到下，从左到右。放不下另起一行
浮动元素顶端不超过当前行

实例

在这里插入图片描述

卡壳效果：

在父盒子上清除浮动，重新计算高度；

定位

三个定位之间的区别，参见 https://blog.csdn.net/gaoyuan1044704446/article/details/79463999
定位之后，relative的边界是相对于自己的。position的margin是相对于浏览器的
使用相对定位之后、绝对定位之后、固定定位之后，margin还是存在的，因为是盒子模型所以不可能不管用。但是如果设置了left,top,right,bottom属性，那么方位优先。但如果方位未确定，定位后的元素还是可以被顶开的。如下：
使用定位后，如何使得被定位的块居中？参见：https://blog.csdn.net/qq_37621289/article/details/82910652

方法2：