css中浮动和Flex布局

一、浮动(加了变成行内块元素)

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

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

  1. 浮动属性float属性用于创建浮动元素,其值可以是leftrightnone(默认值)。

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

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

  4. 清除浮动 :使用clear属性可以清除浮动的影响,常用值有leftrightboth,通常用于处理浮动元素后的布局问题。

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

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

浮动的使用示例:

注意权重:

javascript 复制代码
浮动的使用示例:

.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)属性来布局元素时。浮动元素会脱离文档流,这可能会导致父元素的高度塌陷,即父元素的高度不能正确地包含其浮动的子元素。这通常发生在浮动元素是最后一个或几个子元素时,导致父元素的高度小于浮动元素的高度。

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

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

示例

javascript 复制代码
容器样式
.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属性,来控制子盒子的位置和排列方式,注意
相关推荐
小政爱学习!12 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。17 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼24 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093327 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程2 小时前
【前端基础】CSS基础
前端·css