当前位置：首页 > news >正文

请你学习：前端布局3 - 浮动 float

news 2025/9/16 10:41:49

1 标准流（也称为普通流、文档流）

标准流（也称为普通流、文档流）是CSS中元素布局的基础方式，它决定了元素在页面上的默认排列方式。这种布局方式遵循HTML文档的结构，不需要额外的CSS样式来指定元素的位置。

块级元素（Block-level elements）

块级元素通常用来构建页面的结构和布局框架。它们的特点包括：

独占一行，即每个块级元素前后都会有换行。
可以设置宽度（width）和高度（height）属性。默认情况下，块级元素的宽度会填满其父元素的宽度（除非设置了其他值），高度则由其内容决定。
常见的块级元素包括：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<dl>、<form>、<table>

行内元素（Inline elements）

行内元素通常用于包裹文档中的文本或其他行内内容。它们的特点包括：

不会独占一行，多个行内元素会并排排列在同一行，直到遇到父元素的边缘或其他块级元素才会换行。
默认情况下，不能设置宽度和高度属性（尽管可以通过CSS的某些属性或方法间接实现）。
常见的行内元素包括：<span>、<a>、<i>、<em>、<strong>、<b> 等。

在实际开发中，我们通常会结合使用标准流和其他布局技术来创建符合设计要求的页面布局。例如，使用标准流来构建页面的基本结构，然后使用浮动或定位来微调元素的位置，或者使用Flexbox和Grid来实现复杂的响应式布局。

2 浮动（float)

如何让多个块级盒子(div)水平排列成一行？比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。
在这里插入图片描述

  div {/*float: left;*/width: 150px;height: 200px;background-color: pink;display: inline-block;}

我们可以使用浮动来解决以上问题：
在这里插入图片描述

div {float: left;width: 150px;height: 200px;background-color: pink;}

浮动（Float）是CSS中用于实现复杂布局的一种重要技术，特别是在需要改变元素默认排列方式时。浮动最初设计用于实现文本环绕图片的效果，但后来被广泛应用于网页布局中，特别是用于实现多个块级元素在同一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性在 CSS 中被用来创建浮动框（也称为浮动元素），这些框会被移动到其容器的左侧或右侧，直到其左边缘或右边缘触及包含块（即最近的已定位祖先元素，如果没有这样的祖先元素，则为初始包含块，通常是视口）或另一个浮动元素的边缘。

`float` 值	描述
`left`	元素向左浮动，直到其左边缘触及包含块或另一个浮动元素的边缘。
`right`	元素向右浮动，直到其右边缘触及包含块或另一个浮动元素的边缘。
`none`	默认值。元素不浮动，按照标准流进行排列。

在这个表格中，float属性的每个值都对应了一个描述，解释了当该值被应用时元素的行为。left和right值使得元素能够脱离文档流的正常位置，并分别向左或向右移动，直到它们触碰到其父元素（或最近的已定位祖先元素）的边界或另一个浮动元素的边界。而none值则意味着元素将保持其标准流中的位置，不进行浮动。

浮动元素会脱离标准流(脱标)

当元素被设置为浮动（float）时，它确实会脱离标准流（也称为普通流或文档流）的控制，并移动到指定位置（向左或向右浮动），这个过程通常被称为“脱标”。
浮动元素不再保留原先在标准流中的位置。

 .box1 {width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);}

在这里插入图片描述

.box1 {float: left;width: 200px;height: 200px;background-color: pink;
}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);
}

多个盒子（例如<div>元素）都设置了浮动（无论是向左浮动float: left;还是向右浮动float: right;），并且它们有足够的空间在同一行内显示，那么这些盒子将会按照属性值一行内显示，并且通常是顶端对齐排列的。
在这里插入图片描述

div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 249px;}.four {background-color: skyblue;}<body><div>1</div><div class="two">2</div><div>3</div><div class="four">4</div>
</body>

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

当元素被设置为浮动（float）之后，它们会表现出与行内块元素（inline-block）相似的某些特性

当元素被设置为浮动（float）之后，它们会表现出与行内块元素（inline-block）相似的某些特性，尽管它们在本质上是不同的。以下是浮动元素和行内块元素在表现上的一些相似之处：

水平排列：无论是浮动元素还是行内块元素，它们都可以水平排列在同一行内，直到遇到容器边界或另一个元素（对于浮动元素，是另一个浮动元素或容器的边缘；对于行内块元素，是另一个行内元素或容器的边缘）。
可以设置宽度和高度：浮动元素和行内块元素都可以设置width和height属性，这与真正的行内元素（如<span>）不同，后者通常不能设置宽度和高度。
不会独占一行：与块级元素（如<div>）不同，浮动元素和行内块元素都不会独占一行。它们会根据需要共享容器的宽度，并在同一行内排列。

在这里插入图片描述

        span,div {float: left;width: 200px;height: 100px;background-color: pink;}/* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */p {float: right;height: 200px;background-color: purple;}<body><span>1</span><span>2</span><div>div</div><p>ppppppp</p>
</body>

浮动元素经常和标准流父级搭配使用

在这里插入图片描述

为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置，符合网页布局第一准侧。

使用标准流的父元素排列上下位置：
在这一步中，我们通常会使用块级元素（如<div>）作为布局的主要结构元素，并通过标准流（即文档流）来排列这些元素，以决定它们在页面上的垂直位置。这些父元素通常不会设置浮动或定位，而是保持其默认的块级行为，占据完整的行宽，并顺序排列在页面上。
内部子元素采取浮动排列左右位置：
在确定了父元素的上下位置之后，我们会在这些父元素内部使用浮动元素（通常也是块级元素，但设置了float属性）来排列子元素，以决定它们在页面上的水平位置。浮动元素会根据float: left;或float: right;的属性值向左或向右移动，并尽可能地靠近其父元素的左边缘或右边缘。如果父元素的宽度足够大，可以容纳多个浮动元素，则这些元素会水平排列在同一行内；如果宽度不够，则后续的浮动元素会被推送到新的一行。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动布局练习3</title><style>.box1 {width: 1226px;height: 100px;background-color: green;margin: 0 auto;}.box2 {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}</style>
</head><body>
<div class="box1"></div>
<div class="box2"><div class="left">左青龙</div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</div>
</body></html>

先设置盒子的大小，之后设置盒子的位置

“网页布局第二准则：先设置盒子的大小，之后设置盒子的位置”是一个很好的布局实践原则。这个原则强调了在进行网页布局时，应该首先确定各个元素（盒子）的尺寸（宽度、高度等），然后再确定它们在页面上的位置。这样做有助于避免布局混乱，使得整个页面的结构更加清晰和有序。

具体来说，这个原则可以分解为以下几个步骤：

确定盒子的大小：
- 宽度（Width）：根据设计需求和页面布局，为盒子设置合适的宽度。宽度可以是固定的像素值，也可以是百分比值，或者是使用auto让浏览器自动计算宽度。
- 高度（Height）：同样地，根据设计需求为盒子设置合适的高度。高度也可以是固定的、百分比值或自动计算。
- 内边距（Padding）、边框（Border）和外边距（Margin）：这些属性也会影响盒子的实际大小，因此在设置盒子大小时也需要考虑它们。
设置盒子的位置：
- 定位方式：根据需要使用不同的定位方式（如标准流、浮动、绝对定位、相对定位、固定定位或粘性定位）来设置盒子的位置。
- 具体位置：通过top、right、bottom、left等属性（对于绝对定位、相对定位、固定定位和粘性定位）或margin属性（对于标准流和浮动）来精确控制盒子的位置。

需要注意的是，虽然这个原则强调了先设置盒子大小再设置位置，但在实际布局过程中，这两个步骤并不是完全独立的。很多时候，我们需要根据页面的整体布局和设计需求，灵活地调整盒子的大小和位置，以达到最佳的视觉效果和用户体验。

为什么需要清除浮动？

在这里插入图片描述

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

在这里插入图片描述
给div1 div2 设置了 float: left;

清除浮动方法：<div style="clear:both"></div>

<body>
<div class="div"><div class="div-son-1"></div><div class="div-son-2"></div>
</div>
<div style="clear:both"></div>
<div class="div2"></div>
</body>

1 标准流（也称为普通流、文档流）

块级元素（Block-level elements）

行内元素（Inline elements）

2 浮动（float)

浮动元素会脱离标准流(脱标)

当元素被设置为浮动（float）之后，它们会表现出与行内块元素（inline-block）相似的某些特性

浮动元素经常和标准流父级搭配使用

先设置盒子的大小，之后设置盒子的位置

为什么需要清除浮动？

相关文章：