自学内容网 自学内容网
自学内容网 > 正文

css中浮动和Flex布局

🕗 发布于 2024-05-15 23:07 css  前端  

一、浮动（加了变成行内块元素）

CSS中的浮动（float）是一种布局技术，它允许元素脱离正常的文档流，使其向左或向右移动，直到其边缘触碰到包含块或另一个浮动元素的边缘。浮动元素仍然保留在文档流中，这意味着它们占据空间，但它们周围的元素会围绕它们进行布局。

以下是关于CSS浮动的一些关键点：

  1. 浮动属性：float属性用于创建浮动元素，其值可以是left、right或none（默认值）。

  2. 文档流：浮动元素会脱离文档流，但它们仍然保留在文档的布局中，这意味着它们会推挤其他元素。

  3. 环绕文本：当浮动元素后面没有足够的空间时，文本会环绕在浮动元素的周围。

  4. 清除浮动：使用clear属性可以清除浮动的影响，常用值有left、right、both，通常用于处理浮动元素后的布局问题。

  5. 浮动的副作用：浮动可能会导致布局问题，如父元素的高度塌陷（浮动元素不计算大小，撑不开盒子），因为浮动的子元素不再包含在父元素的计算高度内。

  6. 现代布局技术：随着CSS的发展，现在有了更先进的布局技术，如Flexbox和Grid，它们提供了更强大的布局控制能力，并且可以避免使用浮动时遇到的一些问题。

浮动的使用示例：

注意权重：

浮动的使用示例：

.left-float {
  float: left;
  width: 50%;
}

.right-float {
  float: right;
  width: 50%;
}
HTML结构：

<div class="left-float">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="right-float">
  <img src="image2.jpg" alt="Image 2">
</div>
在上面的例子中，两个div元素将向左和向右浮动，并且它们的宽度各占父元素宽度的50%。

清除浮动的示例：

.clear-float {
  clear: both;
}
HTML结构：

<div style="overflow: auto;">
  <div class="left-float">
    <!-- Content -->
  </div>
  <div class="right-float">
    <!-- Content -->
  </div>
  <div class="clear-float">
    <!-- This div will clear the floats -->
  </div>
</div>
在上面的例子中，.clear-float用于清除前面两个浮动元素的影响，确保父元素能够正确地包裹

清除浮动

在CSS布局中，清除浮动（Clearing Floats）是一个重要的概念，特别是当你使用浮动（float）属性来布局元素时。浮动元素会脱离文档流，这可能会导致父元素的高度塌陷，即父元素的高度不能正确地包含其浮动的子元素。这通常发生在浮动元素是最后一个或几个子元素时，导致父元素的高度小于浮动元素的高度。

为了解决这个问题，你可以使用以下几种方法来清除浮动：

1. 使用clear属性
这是最传统的清除浮动的方法。clear属性可以设置在任何块级元素上，通常是一个新添加的空元素，用来清除前面的浮动元素。




.clear { clear: both; }

HTML结构：




<div style="overflow: auto;"> <div class="float-left">浮动元素1</div> <div class="float-left">浮动元素2</div> <div class="clear"></div> <!-- 清除浮动 --> </div>

2. 使用overflow属性
在父元素上设置overflow属性为auto或hidden可以触发BFC（块级格式化上下文），这将包含浮动元素，从而避免高度塌陷。




.container { overflow: auto; }

3. 使用::after伪元素
使用::after伪元素和clear属性可以清除浮动，同时避免了添加额外的空元素。




.container::after { content: ""; display: table; clear: both; }

HTML结构保持不变，但CSS中加入了::after伪元素的规则。

4. 使用flexbox
Flexbox布局可以自然地处理浮动问题，因为它会自动调整子元素的宽度和高度，以适应容器。




.container { display: flex; }

使用Flexbox时，通常不需要额外的清除浮动的方法。

5. 使用grid
CSS Grid布局同样可以避免浮动问题，因为它提供了一种新的布局方式，可以很好地控制元素的位置和尺寸。


复制

.container { display: grid; }

为什么需要清除浮动？

清除浮动是为了确保布局的完整性和正确性。如果不清除浮动，可能会导致布局错乱，比如：

  • 父元素的高度不正确，导致内容溢出或间隙。
  • 非浮动元素的行为异常，比如文本环绕浮动元素的方式不正确。

选择哪种方法取决于你的具体布局需求和个人喜好。随着CSS布局技术的发展，清除浮动的需求可能会减少，因为Flexbox和Grid提供了更先进的布局解决方案。

二、CSS Flexbox（弹性盒子布局)

CSS Flexbox（弹性盒子布局）是一种用于构建复杂布局的CSS3模块。它提供了一种更加有效的方式来排列、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。Flexbox 解决了传统布局方式中的一些常见问题，如垂直居中对齐。

以下是Flexbox的一些关键概念和属性：

基本概念

  1. 容器（Container）：使用display: flex;或display: inline-flex;声明的容器，可以是任何容器元素。

  2. 项目（Items）：容器内的直接子元素，自动成为弹性项目。

  3. 主轴（Main Axis）：默认从左到右，定义了项目排列的方向。

  4. 侧轴交叉轴（Cross Axis）：与主轴垂直，定义了项目在垂直方向上的排列方式。

  5. 伸缩性（Flexibility）：项目可以伸缩以适应可用空间。

主要属性

容器属性
  1. display：设置为flex或inline-flex，启用Flexbox布局。
  2. flex-direction：定义主轴的方向，可以是row（默认）、row-reverse、column或column-reverse。
  3. flex-wrap：定义项目是否换行，可以是nowrap（默认，不换行）、wrap（换行，第一行在下方）、wrap-reverse（换行，第一行在上方）。
  4. justify-content：定义项目在主轴上的对齐方式，可以是flex-start（默认，起始位置）、flex-end、center、space-between或space-around。
  5. align-items：定义项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、stretch（默认，拉伸以填满容器）或baseline。
  6. align-content：定义多行项目在交叉轴上的对齐方式，类似于justify-content，但用于多行。
项目属性
  1. order：定义项目的排序顺序，数值越小，越靠前。
  2. flex-grow：定义项目放大的比例，当容器有剩余空间时，项目可以增长。
  3. flex-shrink：定义项目缩小的比例，当容器空间不足时，项目可以缩小。
  4. flex-basis：定义项目在分配多余空间之前的默认大小。
  5. flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。（剩余空间）
  6. align-self：允许单个项目有与其他项目不同的交叉轴对齐方式。

示例

容器样式
.flex-container {
  display: flex;
  flex-direction: row; /* 可以是row, row-reverse, column, column-reverse */
  flex-wrap: wrap; /* 可以是nowrap, wrap, wrap-reverse */
  justify-content: space-between;
  align-items: center;
  align-content: stretch; /* 多行时使用 */
}
项目样式
.flex-item {
  order: 1; /* 项目排序 */
  flex: 1; /* 简写形式，等同于flex-grow flex-shrink flex-basis */
  align-self: stretch; /* 单个项目对齐 */
}
Flexbox的优势
简单性：Flexbox提供了一种更简单的方式，来创建灵活的响应式布局。
响应性：Flexbox可以很好地适应不同屏幕尺寸和设备。
对齐：Flexbox提供了多种对齐方式，可以轻松实现项目的水平和垂直居中。
空间分配：Flexbox可以轻松地分配空间，无论是在单个轴上还是两个轴上。
Flexbox是现代网页设计中非常强大的工具，它极大地简化了布局的复杂性，尤其是在处理响应式设计时。随着浏览器对Flexbox的支持越来越广泛，它已经成为构建灵活布局的首选方法之一。

总结：就是给父盒子添加flex属性，来控制子盒子的位置和排列方式，注意

原文地址：https://blog.csdn.net/G24gg/article/details/138553315

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024