CSS- 4.1 浮动(Float)

本系列可作为前端学习系列的笔记,代码的运行环境是在HBuilder中,小编会将代码复制下来,大家复制下来就可以练习了,方便大家学习。
HTML系列文章 已经收录在前端专栏,有需要的宝宝们可以点击前端专栏查看!

点赞关注不迷路!您的点赞、关注和收藏是对小编最大的支持和鼓励!

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动(Float)

CSS- 4.2 相对定位(position: relative)

CSS- 4.3 绝对定位(position: absolute)&学校官网导航栏实例

CSS- 4.4 固定定位(fixed)& 咖啡售卖官网实例


目录

系列文章目录

前言

一、理论部分

1.基本概念

2.浮动属性值

3.浮动元素的特点

4.常见用途

5.清除浮动

5.浮动布局示例

6.现代布局替代方案

7.注意事项

二、代码实例

总结


前言

小编作为新晋码农一枚,会定期整理一些写的比较好的代码,作为自己的学习笔记,会试着做一下批注和补充,如转载或者参考他人文献会标明出处,非商用,如有侵权会删改!欢迎大家斧正和讨论!

一、理论部分

浮动(Float)是CSS中的一个重要布局属性,最初设计用于让文本环绕图像,但现在广泛用于网页布局。

1.基本概念

浮动属性使元素脱离正常的文档流,向左或向右移动,直到碰到包含框或另一个浮动元素为止。

2.浮动属性值

  • float: left; - 元素向左浮动
  • float: right; - 元素向右浮动
  • float: none; - 默认值,元素不浮动
  • float: inherit; - 继承父元素的浮动属性

3.浮动元素的特点

  1. 脱离文档流:浮动元素不再占据文档流中的空间
  2. 文字环绕:非浮动的块级元素会环绕浮动元素
  3. 高度塌陷:父元素可能无法自动包含浮动子元素的高度

4.常见用途

  1. 多栏布局:创建等宽或不等宽的多栏布局
  2. 文本环绕图片:经典的图文混排效果
  3. 导航菜单:创建水平排列的导航项

5.清除浮动

由于浮动元素脱离文档流,可能导致父元素高度塌陷,常用清除浮动的方法:

1. 使用clear属性

css

html 复制代码
.clearfix {
  clear: both;
}

2. 空div方法

html

html 复制代码
<div style="clear: both;"></div>

3. 伪元素清除法(推荐)

css

html 复制代码
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

4. 触发BFC(块级格式化上下文)

css

html 复制代码
.parent {
  overflow: hidden; /* 或 auto */
}

5.浮动布局示例

html

html 复制代码
<div class="container">
  <div class="box" style="float: left; width: 30%;">左侧内容</div>
  <div class="box" style="float: left; width: 70%;">右侧内容</div>
  <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

6.现代布局替代方案

虽然浮动仍然有用,但现代CSS布局技术如:

  • Flexbox
  • CSS Grid
  • 定位(position)

通常能提供更强大和直观的布局解决方案。

7.注意事项

  1. 浮动元素需要明确设置宽度(除非是图像等有内在宽度的元素)
  2. 浮动会影响后续元素的布局
  3. 在响应式设计中,浮动布局可能不如Flexbox或Grid灵活

浮动是CSS中一个强大但需要谨慎使用的工具,理解其工作原理对于创建稳定的布局至关重要。

二、代码实例

代码实例如下:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动float</title>
		<style type="text/css">
			.father {
				width: 400px;
				height: 900px;
				border: 1px solid black;
			}
			.div1 {
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			.div2 {
				width: 200px;
				height: 200px;
				background-color: blue;
				float: left;
			}
			.div3 {
				width: 100px;
				height: 600px;
				background-color: green;
				float: left;
			}
			.c1 {
				clear: both;
				/* 清除浮动 */
				
			}
			ul li {
				float: left;
				width: 120px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="div1"></div>
			<div class="div2 c1"></div>
			<div class="div3"></div>
		</div>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ul>
			
	</body>
</html>

代码运行:


总结

以上就是今天要讲的内容,本文简单记录了CSS-浮动(Float),仅作为一份简单的笔记使用,大家根据注释理解

相关推荐
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
DeepSeek-大模型系统教程5 小时前
推荐 7 个本周 yyds 的 GitHub 项目。
人工智能·ai·语言模型·大模型·github·ai大模型·大模型学习
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js