【前端】CSS页面布局 | float浮动布局

最新推荐文章于 2025-05-26 20:21:04 发布
原创 最新推荐文章于 2025-05-26 20:21:04 发布 · 398 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

本文详细解析了CSS浮动(float)的概念，包括如何实现三列布局，其中A、B元素浮动定位，C元素保持正常文档流。理解浮动对于响应式设计至关重要，掌握如何控制元素间距和避免元素穿透。

float浮动布局

float

float 只能在父级元素中浮动！！

浮动就像排队一样
float元素可以像块级一样通过width height设置宽和高，也可以像行内元素一样并列在一行
可以设置left right 让元素像左/向右贴紧父容器边界/排在前面的元素

float: left;
float: right;

当容器中有部分设置了浮动元素，部分是普通元素。
浮动元素不会占用普通元素的空间，更像是分出了一层在上方，会遮挡住普通元素
在这里插入图片描述

但是普通文档流中的文本节点会识别到他们，并避开他们

在这里插入图片描述

三列布局

两边固定，中间自适应

在这里插入图片描述

A：固定宽高，左浮动

B：固定宽高，右浮动

C：作为普通文档流在中间，并设置内外边距

图片来源于网络

前端CSS：CSS浮动布局float
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-27 1298
CSS 浮动（Float）是一种用于布局的重要技术，它可以让元素脱离文档流，从而实现与其他元素的重叠或环绕。本文将深入探讨浮动的概念、作用以及在实际开发中的应用技巧，并通过一系列示例代码帮助读者理解浮动的工作原理。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过嵌套的浮动和媒体查询，可以创建出更加复杂的流体布局。通过动态计算浮动元素的宽度，可以实现响应式且等宽的布局。通过嵌套的浮动，可以创建复杂的网格布局。通过浮动，可以创建简单的轮播图布局。
请你学习：前端布局3 - 浮动 float
一个搬砖工人
08-04 1393
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。给div1 div2 设置了。
CSS布局：Float布局过程与老生常谈的三栏布局
dayuan5183的博客
07-22 390
原文见博客主站，欢迎大家去评论。 使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博文...
CSS布局(四) float详解
weixin_30546189的博客
02-28 390
一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 <div style="width: 100px;height: 100px"> <img src="image/1.jpg" style="width: 50px;height: 50px;floa...
CSS 的浮动(float)布局是什么？
Learn-anything.cn
12-10 386
一、浮动布局 用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？ 二、应用场景 1、图片浮动 新建 index.html，复制下面代码到文件，用浏览器打开看效果。 <!-- index.html --> <!DOCTYPE html> <html lang='zh-CN'> <head> <meta charset="utf-8"> <t
CSS浮动布局和Flex布局
2301_82023822的博客
03-21 1106
标准流（Normal Flow）是浏览器默认的布局方式，元素按照 HTML 的书写顺序从上到下、从左到右排列，遵循。
CSS-float浮动布局、float清除浮动与flex布局
weixin_44201223的博客
04-26 1878
float flex 清除浮动
【高频考点精讲】CSS浮动布局的替代方案：为什么现代前端已经很少用float了？
全栈老李的博客
05-25 983
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊聊一个让很多新手前端困惑的问题——为什么现在很少看到float布局了？这玩意儿当年可是红极一时啊！记得我刚入行那会儿，float简直就是前端布局的"万金油"。那时候做个两栏布局，不加个都不好意思说自己会CSS。但如今打开GitHub看看主流项目，float的身影已经越来越少了。这中间到底发生了什么？让我们一探究竟。
【网页设计与开发】CSS布局技巧详解：浮动属性与盒子模型在页面构建中的应用及常见问题解决
04-16
内容概要：本文主要介绍了CSS布局中的盒子模型、浮动属性（float）及其相关问题，以及清除浮动（clear）和显示属性（display）。首先讲解了CSS盒子模型的基本概念，包括内容、填充、边框和外边距四个部分，并解释了...
css float 布局
conding_算子
11-03 681
最近写前端页面时，需要将两个 div 并排起来，最简单的方法是通过 float 属性将元素浮动。下面详细介绍元素浮动当构建一个页面的排版时，使用元素浮动是一种直观的方法去控制元素的位置。元素浮动可以让一个元素靠近或者远离另一个元素。它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其他元素之间的关系。当一个元素被浮动时，这个元素是挨着前一个元素，还是出现在新的一行？这取决于它相邻元素的
css float布局
ximingx
01-19 6820
CSS float 布局
CSS float浮动布局
chen__cheng的博客
04-24 2059
CSS float浮动布局1. 清除浮动2. 浮动边界3. 浮动转换4. 形状浮动 控制环绕模式5. 改变元素的显示区域 属性值 选项 说明 left 向左浮动 right 向右浮动 none 不浮动 float是最开始出现的一种布局方式，主要解决：文本在图像周围环绕，也即应用于图像。但是在css中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。 元素一般是处于普通流中，也即块级元素独占一行，从上往下依次显示布局。行级元素可以在一行显示多个，按照顺序进行显
CSS Float 浮动布局
blog
07-13 3429
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将从浮动布局开始学习。 一、Float 布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常
CSS之float浮动布局
o_535Ovo的博客
09-28 1016
css之float浮动布局 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 1. 浮动示例 如下图，把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2从视图中消失。 如果把所有三个框都向左移动，那
HTML/CSS -- 利用float进行页面布局
wust_cyl的博客
12-23 580
布局1： 高度已知，左边固定，右边自适应 当我们缩小浏览器窗口时，黄色自动缩小 &lt;section&gt; &lt;article&gt; &lt;style&gt; .part2-content-wrap div { height: 300px; ...
CSS - 浮动布局（float）
热门推荐
优快云
07-20 2万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS——浮动布局
最新发布
？的博客
05-26 798
本文介绍了CSS浮动属性的工作原理及其影响。浮动元素会脱离文档流，形成独立浮层，左浮动会从左到右排列，右浮动则从右到左排列。浮动会导致父元素高度塌陷，虽然可以通过设置固定高度解决，但这会带来内容溢出、响应式适配差等问题。此外，浮动还会造成文字环绕效果，这种特性在现代前端开发中可能成为副作用。文章最后展示了一个包含浮动导航栏的网页结构示例，演示了浮动在实际布局中的应用。
CSS布局：float 流动布局
weixin_34168880的博客
05-20 1261
前言 对float布局一直是一知半解，只知道会脱离文本流，今日看了一道题： CSS布局：高度已知，左边 300px, 右边300px, 中间自适应。 这是实现（演示）： <html> <style type="text/css"> html *{ margin: 0; } #wrap div{ height: 300px; } #left{ float: l...
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
qq_47443027的博客
04-22 2303
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 4.浮动的影响： 对附近的元素布局造成改变，使得布局混乱 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级
浮动布局详解：css页面设计与实践
"浮动(float)在CSS页面布局中的应用及实践" ...理解并熟练掌握浮动布局，对于网页设计师和前端开发者来说至关重要。通过实践，我们可以更灵活地控制页面元素的排列和对齐，从而创建出美观且功能完善的网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MuShan-bit

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值