css浮动实例

已于 2022-03-26 00:39:43 修改
阅读量205 收藏 2
点赞数
文章标签： css3 前端
于 2022-03-26 00:39:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45732235/article/details/123748721
版权

⭐️实现结果

在这里插入图片描述

✨使用图片

请添加图片描述

请添加图片描述

⭐️具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			:root {
				box-sizing: border-box;
			}
			*,
			::before,
			::after {
				box-sizing: inherit;
			}
			body {
				background-color: #eee;
				font-family: Arial, Helvetica, sans-serif;
			}
			body * + * {
				margin-top: 1.5em;
			}
			.container {
				/* 小视口内层容器会填满屏幕，大视口会扩展到1080px */
				max-width: 1080px;
				margin: 0 auto;
			}
			/* 头部的颜色和内边距 */
			header {
				padding: 1em 1.5em;
				color: white;
				background-color: #0072b0;
				border-radius: .5em;
				margin-bottom: 1.5em;
			}
			/* 主元素的颜色和内边距 */
			.main {
				padding: 0 1.5em;
				background-color: #fff;
				border-radius: .5em;
			}
			
			.media {
				float: left;
				/* 给每个媒体元素加上右侧和底部的外边距 */
				/* 此处特地设置了margin-top为0 是为了清除猫头鹰选择器带来的上外边距 */
				margin: 0 1.5em 1.5em 0;
				/* 从宽度里面减去外边距，防止出现不必要的换行 */
				width: calc(50% - 1.5em);
				padding: 1.5em;
				background-color: #eee;
				border-radius: 0.5em;
			}
			/* 清除浮动 */
			.clearfix::before,
			.clearfix::after {
				/* 防止伪元素的外边距折叠 */
				display: table;
				content: '';
			}
			.clearfix::after {
				/* display: block;
				content: ''; */
				clear: both;
			}
			/* 清除每行的第奇数个元素上的浮动 */
			.media:nth-child(odd) {
				clear: left;
			}
			
			/* 将图片浮动到左侧 */
			.media-image {
				float: left;
				/* 添加外边距，与正文中间出现间隔 */
				margin-right: 1.5em;
			}
			
			/* 删除猫头鹰选择器所添加的顶部外边距 */
			.media-body {
				/* 创建一个新的BFC，这样正文就不会跟浮动的图片重叠 */
				overflow: auto;
				margin-top: 0;
			}
			/* 清除浏览器默认添加的顶部外边距 */
			.media-body h4 {
				margin-top: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Franklin Running Club</h1>
			</header>
			<main class="main clearfix">
				<h2>Running tips</h2>
				
				<div>
					<div class="media">
						<img src="runner.png" alt="" class="media-image">
						<div class="media-body">
							<h4>Strength</h4>
							<p>
								Strength trainning is an important part of 
								injury prevention. Focus on your core&mdash;
								especially your abs and glutes.
							</p>
						</div>
					</div>
					
					<div class="media">
						<img src="shoes.png" alt="" class="media-image">
						<div class="media-body">
							<h4>Cadence</h4>
							<p>
								Check your stride turnover. The most efficient 
								
								runners take about 180 steps per minute.
							</p>
						</div>
					</div>
					
					<div class="media">
						<img src="shoes.png" alt="" class="media-image">
						<div class="media-body">
							<h4>Change it up</h4>
							<p>
								Don't run the same every time you hit the 
								road. Vary your pace,and vary the distance
								of your runs 
							</p>
						</div>
					</div>
					
					<div class="media">
						<img src="runner.png" alt="" class="media-image">
						<div class="media-body">
							<h4>Focus on form</h4>
							<p>
								Run tall but relaxed. Your feet should hit the ground
								beneath your hips,not out in front of you.
							</p>
						</div>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>

使用网格系统提高代码复用性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			:root {
				box-sizing: border-box;
			}
			*,
			::before,
			::after {
				box-sizing: inherit;
			}
			body {
				background-color: #eee;
				font-family: Arial, Helvetica, sans-serif;
			}
			body * + * {
				margin-top: 1.5em;
			}
			/* 清除浮动 */
			.clearfix::before,
			.clearfix::after {
				/* 防止伪元素的外边距折叠 */
				display: table;
				content: '';
			}
			.clearfix::after {
				/* display: block;
				content: ''; */
				clear: both;
			}
			.container {
				/* 小视口内层容器会填满屏幕，大视口会扩展到1080px */
				max-width: 1080px;
				margin: 0 auto;
			}
			/* 头部的颜色和内边距 */
			header {
				padding: 1em 1.5em;
				color: white;
				background-color: #0072b0;
				border-radius: .5em;
				margin-bottom: 1.5em;
			}
			/* 主元素的颜色和内边距 */
			.main {
				padding: 0 1.5em 1.5em;
				background-color: #fff;
				border-radius: .5em;
			}
			
			.media {
				
				padding: 1.5em;
				background-color: #eee;
				border-radius: 0.5em;
			}
			
			
			
			/* 将图片浮动到左侧 */
			.media-image {
				float: left;
				/* 添加外边距，与正文中间出现间隔 */
				margin-right: 1.5em;
			}
			
			/* 删除猫头鹰选择器所添加的顶部外边距 */
			.media-body {
				/* 创建一个新的BFC，这样正文就不会跟浮动的图片重叠 */
				overflow: auto;
				margin-top: 0;
			}
			/* 清除浏览器默认添加的顶部外边距 */
			.media-body h4 {
				margin-top: 0;
			}
			
			/* 添加负外边距  让其向左延伸 跟网页标题对齐*/
			.row {
				margin-left: -0.75em;
				margin-right: -0.75em;
			}
			
			.row::after {
				content: '';
				display: block;
				clear: both;
			}
			
			[class*="column-"] {
				float: left;
				/* 给每个列元素的左右内边距各赋值0.75em */
				padding: 0 0.75em;
				/* 去掉列元素顶部外边距 */
				margin-top: 0;
			}
			.column-1 {
				/* 1/12 */
				width: 8.3333%;
			}
			.column-2 {
				width: 16.6667%;
			}
			.column-3 {
				width: 25%;
			}
			.column-4 {
				width: 33.3333%;
			}
			.column-5 {
				width: 41.6667%;
			}
			.column-6 {
				width: 50%;
			}
			
			.column-7 {
				/* 7/12 */
				width: 58.3333%;
			}
			.column-8 {
				width: 56.6667%;
			}
			.column-9 {
				width: 75%;
			}
			.column-10 {
				width: 83.3333%;
			}
			.column-11 {
				width: 91.6667%;
			}
			.column-12 {
				width: 100%;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Franklin Running Club</h1>
			</header>
			<main class="main clearfix">
				<h2>Running tips</h2>
				
				<div>
					<div class="row">
						<div class="column-6">
							<div class="media">
								<img src="runner.png" alt="" class="media-image">
								<div class="media-body">
									<h4>Strength</h4>
									<p>
										Strength trainning is an important part of 
										injury prevention. Focus on your core&mdash;
										especially your abs and glutes.
									</p>
								</div>
							</div>
						</div>
						
						<div class="column-6">
							<div class="media">
								<img src="shoes.png" alt="" class="media-image">
								<div class="media-body">
									<h4>Cadence</h4>
									<p>
										Check your stride turnover. The most efficient 
										
										runners take about 180 steps per minute.
									</p>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="column-6">
							<div class="media">
								<img src="shoes.png" alt="" class="media-image">
								<div class="media-body">
									<h4>Change it up</h4>
									<p>
										Don't run the same every time you hit the 
										road. Vary your pace,and vary the distance
										of your runs 
									</p>
								</div>
							</div>
						</div>
						
						<div class="column-6">
							<div class="media">
								<img src="runner.png" alt="" class="media-image">
								<div class="media-body">
									<h4>Focus on form</h4>
									<p>
										Run tall but relaxed. Your feet should hit the ground
										beneath your hips,not out in front of you.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>

在这里插入图片描述

lalaxuan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 807
一、案例效果 二、案例分析 三、布局测量摆放 四、完整摆放效果
CSS浮动布局
weixin_43350001的博客
02-03 747
CSS浮动布局文档流简介1、正常文档流2、脱离文档流浮动 文档流简介 什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。可分为“正常文档流”和“脱离文档流”。 1、正常文档流 正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。正常文档流的简单定义是：“正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”即，正常文档流指的就是默认情况下页面元素的布局情况。 如div、p、hr都是块元素
css网页布局之浮动及其实战案例（超详细）
最新发布
2301_82244509的博客
04-26 1066
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器｛ float ：属性值；| 属性值 | 描述 || — | — || none | 元素不浮动（默认值） || left | 元素向左浮动 || right | 元素向右浮动 |所以上面的问题用浮动可以很好的解决。Document。
css的浮动属性
J666_0的博客
09-26 1008
css浮动的语法及特性
CSS布局（定位、浮动）
li17835756262的博客
09-18 813
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
CSS 专业的技巧
weixin_30525825的博客
02-06 101
目录 专业的技巧 支持情况 贡献准则 专业的技巧 使用CSS复位 继承box-sizing 使用:not()选择器来决定表单是否显示边框 为 body 元素添加行高 垂直居中任何元素 逗号分隔的列表 使用负的nth-child来选择元素 使用 SVG 图标 使用 “形似猫头鹰” 的选择器 使用max-height来建立纯 CSS 的滑块 ...
CSS 实例实现清除浮动
09-25
在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。...div style="width:200px;...
css 浮动实例c#网站开发
05-07
浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。 3.带标题的图像浮动于右侧 使带有标题的图像...
CSS使用float属性设置浮动元素的实例教程
09-24
浮动（Float）是CSS布局中一个重要的概念，它允许元素在页面中脱离其原始位置，向左或向右移动，直到其外边缘接触到容器的边框或其他浮动元素。这一特性在创建多列布局、实现图文混排等场景中非常有用。`float`属性...
css 浮动 理解Float的含义
09-25
css实例教程 理解Float的含义.
CSS-浮动及应用案例
qq_40560220的博客
03-06 301
1. 网页布局案例 注意点 1.布局流程：从上向下、从内向外 2.写项目之前，需要去除默认的margin和的padding 3.针对每个盒子的布局，应该先设置大小、背景色，再设置盒子的背景颜色、其他内容、内部填充文字样式。 4.div盒子水平居中代码：magin：0 auto； 2. 小米模块案例 注意点 先设计好如何构成，再去写代码。 右边布局全部用浮动，给每个子模块设置右边界喝下边界。 最右边的子模块使用伪元素查找，设置右边界为0px。 .item:nth-child(4n) 下边四个字模块同理，
css-浮动总结
weixin_40922551的博客
10-12 715
1. 浮动(float) 目标 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清除浮动 能够使用PS切图工具 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：di
css-浮动及页面布局
qq_59950604的博客
01-05 864
行高作用：让文字垂直居中！ /*line-height:300px;*/(等于盒子的高度） /*1、数字+px*/ /*2、数字+em1em=font-size 谷歌浏览器一般默认的文字大小：16px /*line-height:2em;*/ /*3、百分数 百分数*font-size=200%*16px=32px /*line-height:200%;...
css浮动案例
前端小99的博客
04-13 2146
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：&lt;style&gt;* {    box-sizing: border-box;}body {    ma...
理解CSS浮动（练习实例，附完整代码）
微子细的博客
07-02 772
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 效果图： 代码： <!-- 仅定义一个父div，然后从左到右，从上到下的顺序 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
CSS浮动布局案例
weixin_33701564的博客
09-05 358
CSS浮动布局案例 这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识 流体布局 顾名思义流体布局就是布局格式可以随着窗口大小的变化而变化，具体实现如下 代码演示(后续CSS代码均在此代码基础上进行修改) <body> <div class="container clearfix"> &l...
CSS浮动之案例--布局一
sjp991012的博客
03-25 473
用《CSS浮动》文章里的内容完成布局案例一 效果图 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
【布局】学习CSS布局12——浮动布局例子
二木成林
11-30 947
完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。 nav { float: left; width: 200px; } section { margin-left: 200px; } 这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 na...
HTML5-浮动
热门推荐
南劲竹的博客
09-15 1万+
  常见的网页布局:   标准文档流        概念：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。 标准文档流组成:           块级元素（block）:       &lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表          内联元素（inline）:   ...
CSS浮动：深入理解float属性
Meyer撰写的一本关于CSS浮动技术的专业书籍，于2016年2月4日发布，包含48页的平装版。该书详细阐述了CSS中的浮动概念及其在网页布局中的应用。" 在Web设计中，CSS（Cascading Style Sheets）浮动是一种关键的技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lalaxuan

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

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

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

打赏作者

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

抵扣说明：

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

余额充值