浮动练习与清除浮动

最新推荐文章于 2023-05-14 00:17:38 发布
最新推荐文章于 2023-05-14 00:17:38 发布
阅读量359 收藏 1
点赞数
分类专栏： 笔记、日常、代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wang8309166/article/details/103298438
版权

浮动练习

浮动练习：在一个大盒子里面整齐的摆放如下图所示的图形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动作业</title>
	<style type="text/css">
		
		.box{
			width: 1000px;
			margin: 0 auto;
		}
		div div{
			font: 900 30px/100px 'STSong'; 
			color: #fff;
			text-align: center;
			width: 200px;
			height: 100px;
			background-color: green;
			float: left;
			box-sizing:border-box;
			border:1px solid red;
		}
		.box .b6{
			width: 600px;
			background-color: yellow;
		}
		.box .b7{
			float: right;
			width: 400px;
			height: 200px;
			line-height: 200px;
			background-color: pink；
		}
		.box .b8{
			float: left;
			width: 300px;
			height: 150px;
			line-height: 150px;
			color:black;
			background-color: white;
		}
		.box .b9{
			float: left;
			width: 300px;
			height: 150px;
			line-height: 150px;
			background-color: black;
		}
		.box .b10{
			float: right;
			width: 400px;
			height: 150px;
			line-height: 150px;
			background-color: skyblue;
		}
		.b11{
			float: left;
			width: 600px;
			height: 100px;
			line-height:100px;
			background-color: red;
		}
		.b12{
			width: 1000px;
			background-color: blue;
		}
</style>
</head>
<body>
	<div class="box clearfix">
		<div class="b1">1</div>
		<div class="b2">2</div>
		<div class="b3">3</div>
		<div class="b4">4</div>
		<div class="b5">5</div>
		<div class="b6">6</div>
		<div class="b7">7</div>
		<div class="b8">8</div>
		<div class="b9">9</div>
		<div class="b10">10</div>
		<div class="b11">11</div>
		<div class="b12">12</div>
</body>
</html>
清除浮动

清除浮动的原因：当在父盒子里面摆放了若干的浮动的盒子，当你在当前父盒子的下面想要插入下一个盒子的时候，由于父盒子里的孩子因浮动导致高为0进而导致下一个盒子会紧挨着高为0的当前父盒子被盖在下面。
解决：清除浮动,利用伪元素来清除浮动，如下代码。

		.clearfix:after{
			display: block;
			content: "";
			clear: both;
			visibility:hidden; 
		}
		.clearfix{
			*zoom: 1;
		}

将上一个盒子的下方插入另一个盒子练习清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动作业</title>
	<style type="text/css">
		
		.box{
			width: 1000px;
			margin: 0 auto;
		}
		.clearfix:after{
			display: block;
			content: "";
			clear: both;
			visibility:hidden; 
		}
		.clearfix{
			*zoom: 1;
		}

		div div{
			font: 900 30px/100px 'STSong'; 
			color: #fff;
			text-align: center;
			width: 200px;
			height: 100px;
			background-color: green;
			float: left;
			box-sizing:border-box;
			border:1px solid red;
		}
		.box .b6{
			width: 600px;
			background-color: yellow;
		}
		.box .b7{
			float: right;
			width: 400px;
			height: 200px;
			line-height: 200px;
			background-color: pink；
		}
		.box .b8{
			float: left;
			width: 300px;
			height: 150px;
			line-height: 150px;
			color:black;
			background-color: white;
		}
		.box .b9{
			float: left;
			width: 300px;
			height: 150px;
			line-height: 150px;
			background-color: black;
		}
		.box .b10{
			float: right;
			width: 400px;
			height: 150px;
			line-height: 150px;
			background-color: skyblue;
		}
		.b11{
			float: left;
			width: 600px;
			height: 100px;
			line-height:100px;
			background-color: red;
		}
		.b12{
			width: 1000px;
			background-color: blue;
		}
		.box1{
			width:1200px;
			height: 100px;
			background-color: pink;
			margin:0 auto;
		}
</style>
</head>
<body>
	<div class="box clearfix">
		<div class="b1">1</div>
		<div class="b2">2</div>
		<div class="b3">3</div>
		<div class="b4">4</div>
		<div class="b5">5</div>
		<div class="b6">6</div>
		<div class="b7">7</div>
		<div class="b8">8</div>
		<div class="b9">9</div>
		<div class="b10">10</div>
		<div class="b11">11</div>
		<div class="b12">12</div>
	</div>
	<div class="box1"></div>
</body>
</html>
oxygen gas
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中浮动和定位（练习+知识点）
weixin_54107527的博客
04-14 2597
目录 定位 1、什么是脱离文档流 2、position定位 2.1 static定位 2.2 relative定位 2.3 absolute定位 2.4 fixed定位 2.5 sticky定位（存在兼容性问题） 层级属性z-index 浮动 定义： 取值： 作用： 特性： 浮动练习 定位 1、什么是脱离文档流 文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流 元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流...
HTML核心+CSS基础（练习）
最新发布
2301_80441013的博客
11-19 303
学习语言练习是必不可少，重中之重的，这一周我进行了常规流，浮动，定位以及表单元素的练习下面就让我们一起看看这周的分享吧！
【CSS系列】第八章 · CSS浮动
麟-小白的博客
05-14 1176
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1.浮动1.1浮动的简介在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。1.2元素浮动后的特点🤢脱离文档流。😊。
关于浮动的练习
amy0821的博客
08-06 724
编程练习 小伙伴们，根据所学知识，实现如下图所示的简单两列布局，整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。 效果图: 温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。
学习记录 练习浮动
wyh1216的博客
06-22 117
浮动
浮动练习2_12月9日课堂源码.rar
12-10
在实践中，通常需要使用`clear`属性来处理清除浮动，以防止父元素因浮动元素而高度塌陷。 浮动布局广泛应用于创建多列布局、侧栏、图片排列等场景。随着现代CSS布局方法如Flexbox和Grid的出现，浮动的重要性相对...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
但是，需要注意清除浮动（clearfix），以防止父元素因浮动元素而高度塌陷。这可以通过添加伪类`:before`或`:after`并使用`clear:both`来实现。 在“page”这个文件中，你将有机会实践这些理论知识，通过查看和修改...
CSS 浮动布局的练习 Demo，名为 古诗欣赏
09-16
浮动布局的一个关键问题是“清除浮动”（clearing floats）。如果不进行清除，后续的非浮动元素可能会意外地被浮动元素影响。在`index.html`文件中，可能包含了一些带有清除浮动样式的元素，例如： ```html ...
个人代码+笔记.zip
05-19
他们可能编写了一些示例代码，用来练习如何有效地清除浮动以避免布局问题，同时探索如何构建能自适应各种屏幕尺寸的页面元素。笔记部分可能详细记录了他们在学习过程中遇到的问题、解决方案以及心得，这对于其他...
Lesson5:浮动资产
03-17
3. **清除浮动**：浮动元素可能导致父元素的高度塌陷，为解决这个问题，我们可以使用`clear`属性。`clear: both;`会阻止元素出现在浮动元素的旁边，帮助恢复正常的流体布局。 4. **响应式设计**：在浮动元素的应用...
CSS浮动练习
08-21
浮动练习
理解CSS浮动（练习实例，附完整代码）
微子细的博客
07-02 772
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 效果图： 代码： <!-- 仅定义一个父div，然后从左到右，从上到下的顺序 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
H5浮动练习
xuemoKingDeath的博客
04-16 1208
html> html lang="en"> head> meta charset="UTF-8"> style> #header{ height: 100px; background-color: red; } #body{ background-color: gree
HTML 第七章：浮动 课后作业
gz98411的博客
06-25 4621
1.&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摄影社区热门小镇&lt;/title&gt; &lt;style&gt; #Ba{width:520px;hei
HTML5 第七章浮动课后作业
tb19930719的博客
06-24 6772
HTML5 第七章浮动课后作业 制作摄影社区热门小镇 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摄影社区热门小镇&lt;/title&gt; &lt;style&gt;
浮动布局练习题目
sql121407的博客
09-27 3129
题目一 通过浮动布局实现以下图片 题目二 通过浮动布局实现以下图案 题目一代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;ti
html清除浮动排班练习,css布局基础：浮动和清除浮动练习1
weixin_35785090的博客
06-15 133
主要知识点：1、2、浮动只能左右，不能上下。3、子元素浮动会造成父元素高度塌陷，方法1：通过overflow属性方法2：通过clear属性方法3：通过伪元素选择器(推荐)效果图：参考：css布局基础：浮动和清除浮动练习1|www.125jz.com.one img {width: 100px;height: 100px;float: left;}.two img {width: 100px;hei...
前端学习（1800）：前端调试之清除浮动练习1
歌谣的博客
07-29 212
<!DOCTYPE html> <html lang="en"> <head> <!--系统内置 start--> <script type="text/javascript"></script> <!--系统内置 end--> <meta charset="UTF-8"> <title>练习</title> <link rel=".
慕课网2-3编程练习：媒体查询用法响应式效果小案例-字体颜色随浏览器窗口宽度而变化...
weixin_34388207的博客
06-03 438
2-3编程练习 我们刚学习过了媒体查询的用法，接下来我们事先一个小的响应式效果吧。（建议到本地践行测试哦） 要求： （1）浏览器窗口宽度大于1100px时，文字颜色为红色； （2）小于1100px大于960px时，文字颜色为橙色； （3）小于960px大于800px时，文字颜色为黄色； （4）小于800px大于750px时，文字颜色为绿色； （5）小于750px大于600px时，文字...
CSS3样式表定位和浮动技术总结
然而，在使用这些技术时也需要注意一些细节问题，比如浮动会导致元素脱离标准流，造成布局混乱，需要通过清除浮动或者其他方法进行调整；绝对定位的元素需要相对于其包含块进行定位，对于不熟悉的开发者可能需要仔细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值