浮动与定位
浮动：
- 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
- 非文档流元素与文档流中的元素位置相同时，会将其覆盖，但是文档流中元素里的文本会被挤出
- 需要足够的空间，也有可能会被“卡住”。
- 浮动会影响排列 如p标签 方法是 清除浮动
clear 属性 - 对内联元素设置浮动，会直接将其变成块级元素
设置浮动的副作用：
在CSS中，使用浮动（float）属性可以使元素向左或向右浮动，从而允许文本和内联元素环绕它。这种布局技术常用于创建多列布局或在文本中插入图片。然而，浮动也会带来一些副作用，主要包括：
-
脱离文档流：浮动的元素会脱离正常的文档流，不再占据原来的空间。这可能导致父元素无法正确包裹其子元素，从而影响布局。
-
高度塌陷：当父元素包含浮动元素时，如果没有明确设置高度，父元素的高度可能会塌陷，即高度变为0，因为浮动元素不占据空间。
-
覆盖非浮动元素：浮动元素可能会覆盖或被非浮动元素覆盖，这取决于它们的排列和清除方式。
-
布局混乱：浮动元素可能会导致后续元素的布局混乱，特别是如果后续元素没有适当的清除浮动处理。
-
宽度变化：浮动元素的宽度通常由其内容决定，除非显式设置宽度。这可能导致布局在不同屏幕尺寸或内容变化时出现不一致。
-
对齐问题：浮动元素可能会影响同一行内其他元素的对齐方式，尤其是在没有明确设置对齐属性的情况下。
为了解决这些副作用，可以采用以下方法：
-
清除浮动：使用
clear属性（如clear: both;）来阻止元素后面的元素浮动到它的周围。 -
父元素高度：为父元素设置一个明确的高度，以防止高度塌陷。
-
使用
overflow属性：给父元素添加overflow: auto;或overflow: hidden;可以创建一个新的块格式化上下文（BFC），从而包含浮动元素。 -
伪元素清除法：使用
:after伪元素和clear: both;来清除浮动，通常与content属性一起使用，但内容设置为空。 -
Flexbox或Grid布局：在现代布局中，可以使用Flexbox或Grid来替代浮动，这些布局模式提供了更灵活和强大的布局控制。
-
包裹浮动元素：将浮动元素包裹在一个容器中，并对该容器进行样式设置，以确保布局的一致性。
理解和妥善处理浮动的副作用对于创建响应式和可维护的Web布局至关重要。
BFC：
块级格式化上下文（Block Formatting Context，简称BFC）是CSS中的一个重要概念，它是一个独立的渲染区域，拥有自己的一套布局规则。BFC中的元素布局与外部互不影响，主要有以下特性和应用场景：
BFC的特性：
-
内部元素垂直排列：BFC中的元素会垂直排列，一个接一个地放置。
-
外边距折叠（外边距塌陷）：属于同一个BFC的两个相邻元素的外边距可能会合并为一个外边距，即外边距重叠。
-
与浮动元素不重叠：BFC的区域不会与浮动元素重叠。
-
包含浮动：BFC可以包含内部的浮动元素，防止父元素塌陷， 计算高度时包括浮动元素。
-
阻止外边距重叠：创建BFC可以避免外边距重叠的问题。
如何创建BFC：
- 根元素：如
<html>。 - 浮动元素：设置
float为非none值。 - 绝对定位元素：设置
position为absolute或fixed。 - 非块级元素：如
inline-block、table-cell、flex、inline-flex等。 overflow属性：设置overflow为非visible值，如hidden、auto、scroll。
BFC的应用场景：
- 清除浮动：防止父元素高度塌陷，可以使用
overflow: auto或overflow: hidden创建BFC。 - 自适应两列布局：利用BFC的特性，可以实现两列布局，其中一列浮动，另一列通过BFC实现自适应高度。
- 防止外边距重叠：通过创建BFC，可以避免兄弟元素之间的外边距重叠。
BFC的布局规则：
- 内部盒子排列：BFC内部的盒子会在垂直方向上一个接一个地放置。
- 垂直距离由margin决定：属于同一个BFC的两个相邻盒子的
margin会发生重叠。 - 外边距盒与包含块接触：每个元素的外边距盒的左边与包含块的左边相接触，即使存在浮动也是如此。
- 区域不与浮动重叠：BFC的区域不会与浮动元素重叠。
- 计算高度时包含浮动：计算BFC的高度时，浮动元素也参与计算。
理解BFC的概念和特性对于解决CSS布局中的问题非常有帮助，例如清除浮动、防止外边距重叠、实现自适应布局等。
浮动元素居中：
定位
-
相对定位（
relative）-
概念：相对定位是相对于元素的初始位置进行定位的。即使元素被重新定位了，它仍然占据原来的空间。
-
用途：当你想要在不脱离文档流的情况下微调元素的位置时，可以使用相对定位。
-
通过
left，right，top，bottom属性进行位置的偏移。 -
特点：
- 元素的位置是相对于其正常位置的偏移。
- 元素仍然占据其在正常文档流中的空间。
-
-
绝对定位（
absolute）-
概念：绝对定位是相对于其最近的已定位（非 static）祖先元素进行定位的。如果没有这样的祖先元素，则相对于文档的 元素。
-
用途：当你想要将元素放置在页面上的特定位置，并且不关心它在文档流中的位置时，可以使用绝对定位。
-
通过
left，right，top，bottom属性进行位置的偏移。 -
可以用
z-index进行分层 -
特点：
- 元素的位置是相对于其最近的已定位的祖先元素。
- 元素完全脱离文档流，不占据空间，会覆盖没有设置定位属性的元素。
-
-
区别：
- 文档流：相对定位的元素仍然占据其在正常文档流中的空间，而绝对定位的元素则完全脱离文档流。
- 参照物：相对定位是相对于元素的初始位置，绝对定位是相对于最近的已定位的祖先元素或 元素。
- 用途：相对定位常用于微调元素位置，而绝对定位常用于创建复杂的布局。
sticky属性是relative和fixed的相结合，要使用必须要配合 top,bottom，left，right 属性使用
sticky定位常用于以下场景：
- 粘性头部：表格或列表的标题行固定在屏幕顶部，当用户滚动页面时，标题行会停留在顶部，直到滚动回其原始位置。
- 侧边栏：在页面滚动到侧边栏的特定部分时，使其固定在屏幕的一侧。
- 搜索栏：在页面滚动时，搜索栏固定在页面的顶部，方便用户随时进行搜索。
注意事项
使用
sticky定位时需要注意以下几点：
- 兼容性：较老的浏览器可能不支持
sticky定位。- 阈值设置：需要明确设置
top,right,bottom, 或left属性，否则元素不会表现出固定定位的行为。- 父元素的溢出：如果父元素有
overflow属性设置为hidden或auto，可能会影响sticky定位元素的显示。
-
fixed定位：
fixed定位常用于以下场景：- 固定导航栏：将导航栏固定在页面顶部，不随页面滚动而移动。
- 广告或通知：在页面的特定位置显示广告或通知，即使用户滚动页面也不会消失。
- 返回顶部按钮：提供一个按钮，当用户滚动到页面底部时，可以快速返回到页面顶部。
注意事项：
使用
fixed定位时需要注意以下几点：- 不要遮挡内容：确保固定元素不会遮挡页面的重要内容。
- 考虑移动设备：在移动设备上，固定元素可能会覆盖地址栏或其他UI元素，需要仔细测试。
- 性能影响：过多的固定元素可能会影响页面的性能，尤其是在滚动时。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
