CSS常见布局方式（一）：浮动布局

分类: 前端开发

2024-01-11

评论: 0

字数: 5472

前言

浮动布局（Float布局）是一种CSS布局技术，用于在网页中创建多列布局、图文混排等结构。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕在其周围。

浮动语法

float: none不浮动，left左浮动，right右浮动。

浮动布局特点：测试地址

1、当元素使用float:left左浮动或float:right时，元素会以顶部对齐，且紧挨着没有缝隙。

无浮动

设置浮动后

2、当元素使用float:left左浮动或float:right时，不管元素是inline、inline-block还是其它，都会变成block。

3、当多个元素使用float:right时，元素顺序会翻转。

4、当元素使用float:left左浮动或float:right时，元素会脱离正常文档流，父元素高度塌陷。

使用float:right时

使用时

5、当元素使用float:left左浮动或float:right时，元素使用margin: 0 auto;无效。

浮动的影响和解决办法

容器高度塌陷：浮动元素脱离了文档流，可能导致包含它们的容器高度塌陷。这是因为浮动元素对容器的高度计算没有影响，容器无法正确地包裹浮动元素。

(推荐)在容器末尾添加一个空的块级元素，并为其应用clear: both;样式，以清除浮动。

html

.warp::after {
  display: block;
  content: "";
  clear: both;
}

给容器设置 overflow: hidden; 或 height

html

.warp {
  width: 300px;
  height: 400px;
  border: 2px solid #ff0000;
  overflow: hidden;
}

打赏

本文标签:

本文链接:

https://www.vscing.com/article/39.html

本文由vscing原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

CSS常见布局方式介绍

CSS常见布局方式（二）：定位布局

标签

css elk 实用工具 git md redis k8s docker vite webpack typescript vue html liunx golang java node mysql php javascript axios react

文章榜

使用rsync实现Linux服务器间文件同步

深入理解promise原理以及相关方法，并手写代码

深入理解js内存生命周期和GC（垃圾回收）机制

163阅读

0点赞

深入理解事件循环Event Loop（宏任务、微任务）

深入理解闭包、偏函数、函数柯里化、高阶函数、IIFE

前言 ​

浮动语法 ​

浮动布局特点：测试地址 ​

浮动的影响和解决办法 ​

前言

浮动语法

浮动布局特点：测试地址

浮动的影响和解决办法