21.HTML 浮动、定位和显示属性

SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动（Float）

浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

文字环绕图片。
创建水平导航栏。
无网格系统时的列布局。

注意事项

清除浮动（Clearing Floats）：使用clear属性可以防止元素被浮动元素覆盖。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过清除浮动或使用其他技术（如overflow）来解决这个问题。
浮动塌陷（Float Collapse）：浮动元素不占据空间，可能导致父元素高度塌陷。

定位（Position）

定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

相对定位（Relative Positioning）：元素相对于其正常位置进行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素进行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相对于视口进行定位，即使页面滚动也不会移动。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

定位元素可能会脱离文档流，影响周围元素的布局。
z-index属性可以控制堆叠顺序。
绝对定位元素的容器应有position: relative;，以便正确定位。

显示（Display）

display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

块级元素（Block）：display: block;使元素表现为块级，占据新的行。

.block-element {
  display: block;
}

内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。

.inline-element {
  display: inline;
}

内联块元素（Inline-Block）：display: inline-block;允许元素并排排列，同时拥有块级元素的宽度和高度属性。

.inline-block-element {
  display: inline-block;
}

弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵活地在容器内排列。

.flex-container {
  display: flex;
}

网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。

.grid-container {
  display: grid;
}

隐藏元素（None）：display: none;将元素隐藏，且不为元素保留空间。

.hidden-element {
  display: none;
}

注意事项

使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
display: flex;和display: grid;为现代布局提供了更多控制，通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。

动

使用CSS浮动，元素可以向左或向右推，允许其他元素包围它。Float通常与图像一起使用，但在使用布局时也很有用。float属性的值为left，right，none。

none（默认值）确保元素不会浮动。

如果一个接一个放置几个浮动元素，如果有足够的空间，它们将彼此浮动。

例如，在打印布局中，可以将图像设置到页面中，使得文本根据需要在其周围包围。

清除浮动

浮动元素后面的元素将在其周围流动。为避免这种情况，请使用clear属性清除浮动。

面试中考察css的时候面试官可能会让你聊一聊浮动,那么接下来我们将总结css中浮动的常见的问题

浮动的特点

文字环绕效果：通过设置float属性，我们可以轻松实现图文混排，让文字围绕在浮动元素周围。

脱离文档流：当一个元素浮动后，它将不再遵循正常的文档流顺序排列，而是移动到其所在容器边缘，并尽可能向左或向右浮动。原本在其下方的内容会向上填充该元素原先在文档流中的位置。参考下方例子,使用浮动之后span标签盖住了div标签
赋予行内元素尺寸控制权：通常情况下，行内元素（如<span>）不能直接设置宽度和高度。然而，一旦设置了浮动，这些元素就具有了类似块级元素的特性，允许开发者为其设定明确的宽高尺寸。

为span标签设置宽高但是检查发现宽高失效

使用浮动:

我们可以看到上述的span标签的宽高生效,并且将div容器给盖住了

缺点

尽管浮动功能强大，但它的一个显著副作用就是可能导致后续元素布局的混乱：

后续元素布局错乱：由于浮动元素脱离了文档流，紧随其后的元素可能会填补浮动元素腾出的空间，进而破坏原有的布局结构，尤其是在未正确处理浮动闭合的情况下。

消除浮动

为了克服上述布局难题，有几种常见的清除浮动技术，其中一种是通过使用伪元素来清除浮动，另外一种则是利用Block Formatting Context（BFC）容器来包容浮动元素并恢复有序布局。

清除浮动的传统手段

增加额外标签清除浮动:在浮动元素之后增加一个空元素,设置clear:both,这样后面的元素便不会受到浮动的影响,或者给其伪元素设置样式
直接设置父容器尺寸：如果情况允许，也可以简单地为浮动元素的父容器设置固定的宽高，但这并不总是最佳解决方案，因为它无法自适应内容的变化。

利用BFC容器

BFC（Block Formatting Context）是一种特殊的布局环境，在此环境下，内部元素的行为更易于预测和控制。以下是BFC的特点：

内部元素垂直堆叠：BFC内的子元素将会彼此垂直对齐，不相互重叠。
边距重叠限制：在同一BFC中的相邻块级元素，其垂直边距不会与外部元素合并，避免了常见的边距合并问题。点击查看边距重叠问题
防止元素被浮动元素覆盖：BFC有助于保持布局稳定性，防止非浮动元素被浮动元素所覆盖。
计算高度时包含浮动元素：BFC在计算自身高度时会把浮动元素的高度考虑进去，保证了容器的高度能够正确反映内容的高度。

创建BFC容器的方法

创建一个BFC容器可以通过以下途径实现：

设置overflow属性：将容器的overflow属性设为auto、hidden或scroll，这会使浏览器自动为该容器创建一个新的BFC。

.container {
overflow: auto; /* 或 hidden、scroll */
}

更改display属性：将容器的display属性设置为inline-block、table-cell、flex或inline-flex其中之一，同样能触发BFC的创建。

.container {
display: inline-block; /* 或 table-cell、flex、inline-flex */
}

设置浮动：虽然不是理想的创建BFC场景，但将元素设置为浮动（即float属性不为none）也能形成新的BFC。
利用伪元素创建BFC并清除浮动：在父容器后添加伪元素，并通过特定样式使其成为BFC的同时清除浮动。


.parent:after{
  /* 设置添加子元素的内容是空 */
    content: '';  
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
  
}

浮动总结

特点:

实现文字环绕效果
能够让行内元素设置宽高
能够使元素脱离文档流,而之前占据的空间将会被其他元素占据

缺点: 造成后面的布局错乱,增加布局的难度

清除浮动的影响:

为父容器设置宽高,如果条件允许
增加额外的元素在浮动元素最后面,并设置clear:both;,或者是在其伪元素:after设置样式
将父容器变为bfc容器父容器属性overflow为atuo,scroll,hidden 设置父容器浮动给父容器的伪类:after设置样式父容器display的值设置为inline-flex,flex,table-cell,inline-block其中一个

BFC容器特点:

没有边距重叠问题
浮动元素不会遮住其它元素,并将其高度计算在内

本人还在学习中，水平有限，文章可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝事业有成,生活愉快！

作者：GuanYi
链接：https://juejin.cn/post/7332767759430991910

在线咨询

上一篇：JavaScript前端应用：图片自动按轨迹移动效果
下一篇：CSS3技巧之形状（椭圆）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

21.HTML 浮动、定位和显示属性

浮动（Float）

使用场景

注意事项

定位（Position）

使用场景

注意事项

显示（Display）

使用场景

注意事项

示例

HTML结构

CSS样式

结语

动

清除浮动

浮动的特点

缺点

消除浮动

清除浮动的传统手段

利用BFC容器

创建BFC容器的方法

浮动总结

本人还在学习中，水平有限，文章可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝事业有成,生活愉快！

您的项目需求