CSS-8.3-浮动与清除

最新推荐文章于 2022-04-08 12:04:04 发布
最新推荐文章于 2022-04-08 12:04:04 发布
阅读量290 收藏
点赞数 1
分类专栏： WEB前端 CSS 文章标签： CSS浮动 CSS清除 父盒子塌陷
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/101276266
版权

CSS-8.3-浮动与清除

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置

浮动与清除
1.float：浮动
2.clear:清除
3.子盒子浮动造成父盒子高度塌陷

一：float：浮动

  • float属性使元素脱离了常规文档流而表现为向右或向左浮动
  • 由于浮动的元素不在文档流中，所以在文档流中浮动的元素就像不存在一样，其周围的元素也会重新排列
  • 浮动是为了打破常规的文档流模型，在页面布局中降低局限性
  • float属性值
    • left：元素向左浮动
    • right：元素向右浮动
    • none：默认，元素不浮动

浮动的特征
1.浮动会让元素脱离文档流，后面不浮动的元素会占据原来的位置
2.停止浮动：
      a.碰到父级元素的边界会停止
      b.碰到前面有浮动的元素（紧跟在浮动元素之后排列）
      c.碰到没有浮动的元素
3.浮动会把元素转换成行内块元素（让元素并在一行）
4.当父元素没有设置固定高度和子元素都浮动时，父级元素的高度就无法被撑开（给父级元素添加overflow:hidden清除浮动）
5.当父级元素不够时，浮动元素会换行显示
6.浮动只能打破文档流，不能打破字节流

<!-- 特征一
1.浮动会让元素脱离文档流，后面不浮动的元素会占据原来的位置-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动的特征一</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
		}
		/* 给div1添加右浮动 */
		.div1{
			background-color: #ff0;
			float: right;
		}
		/* 没有添加浮动 */
		.div2{
			background-color: #0ff;
		}
	</style>
</head>
<body>
	<div class="div1">向右浮动</div>
	<div class="div2">没有浮动</div>
</body>
</html>

效果图
在这里插入图片描述

<!-- 停止浮动
a.碰到父级元素的边界会停止 
b.碰到前面有浮动的元素（紧跟在浮动元素之后排列） 
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>停止浮动</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		/* 碰到父级元素的边界会停止 */
		.div1{
			background-color: #ff0;
			float: right;
		}
		.div2{
			background-color: #0ff;
			float: left;
		}
		/* 碰到前面有浮动的元素（紧跟在浮动元素之后排列）*/
		.div3{
			background-color: #f00;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">向右浮动</div>
	<div class="div2">向左浮动</div>
	<div class="div3">向左浮动</div>
</body>
</html>

效果图
在这里插入图片描述

<!-- 停止浮动
c.碰到没有浮动的元素-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>停止浮动</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			text-align: center;
			line-height: 100px;
		}
		/* 不设置浮动 */
		.div1{
			background-color: #ff0;
		}
		/* 设置向左浮动 */
		.div2{
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">不浮动</div>
	<div class="div2">向左浮动</div>
</body>
</html>

效果图
在这里插入图片描述

<!-- 特征三
3.浮动会把元素转换成行内块元素（让元素并在一行）-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征三</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			text-align: center;
			line-height: 100px;
		}
		/* 设置向左浮动 */
		.div1{
			background-color: #ff0;
			float: left;
		}
		/* 设置向左浮动 */
		.div2{
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">向左浮动</div>
	<div class="div2">向左浮动</div>
</body>
</html>

效果图
在这里插入图片描述

<!-- 特征四
4.当父元素没有设置固定高度和子元素都浮动时，父级元素的高度就无法被撑开-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征四</title>
	<style type="text/css">
		.wrap{
			border: 5px solid red;
		}
		/* 设置向左浮动 */
		div{
			line-height: 100px;
			text-align: center;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #ff0;
			float: left;
		}
		/* 设置向左浮动 */
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">向左浮动</div>
		<div class="div2">向左浮动</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

<!-- 特征五
5.当父级元素不够时，浮动元素会换行显示-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征五</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
		}
		/* 设置向左浮动 */
		.div1{

			background-color: #ff0;
			float: left;
		}
		/* 设置向左浮动 */
		.div2{
			background-color: #0ff;
			float: left;
		}
		/* 设置向左浮动 */
		.div3{
			background-color: #369;
			float: left;
		}
		/* 设置向左浮动 */
		.div4{
			background-color: #903;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">向左浮动</div>
	<div class="div2">向左浮动</div>
	<div class="div3">向左浮动</div>
	<div class="div4">向左浮动</div>
</body>
</html>

效果动态图
在这里插入图片描述

<!-- 特征六
6.浮动只能打破文档流，不能打破字节流
文字环绕
给div2添加clear:both即可清除浮动-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征六</title>
	<style type="text/css">
		/* 向左浮动 */
		.div1{
			width: 100px;
			height: 100px;
			border: 2px solid red;
			float: left;
		}
		/* 不浮动 */
		.div2{
			width: 50px;
			height: 50px;
			background-color: #ff0;
		}
	</style>
</head>
<body>
	<div class="div1">向左浮动</div>
	<div class="div2">不浮动</div>
</body>
</html>

效果图
在这里插入图片描述

二：clear：清除

  • 属性值
    • left：清除左浮动影响
    • right：清除右浮动影响
    • both：同时清除左右浮动影响
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		/* 向左浮动 */
		.div1{
			width: 100px;
			height: 100px;
			border: 1px solid #f00;
			float: left;
		}
		.div2{
			width: 50px;
			height: 50px;
			background-color: #0ff;
			/* 清除浮动 */
			clear: both;
		}
	</style>
</head>
<body>
	<div class="div1">向左浮动</div>
	<div class="div2">不浮动</div>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		.div1{

			background-color: #ff0;
			float: left;
		}
		.div2{
			background-color: #0ff;
			float: left;
		}
		.div3{
			background-color: #369;
			float: left;
			/* 清除浮动之后换行显示 */
			clear: both;
		}
		.div4{
			background-color: #903;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">向左浮动1</div>
	<div class="div2">向左浮动2</div>
	<div class="div3">向左浮动3</div>
	<div class="div4">向左浮动4</div>
</body>
</html>

效果图

在这里插入图片描述

三：子盒子浮动造成父盒子高度塌陷

  • 当子盒子全部浮动，如果父盒子没有指定高度，则父盒子高度将会塌陷为0

解决父级元素高度无法撑开问题（是给浮动元素的父级添加）
1.在父元素中添加一个新的元素，为新元素设置clear:both
2.为父元素添加overflow:hidden属性
3.为父元素添加伪类：after,对伪类设置clear:both

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		.wrap{
			border: 2px solid #f00;
		}
		/* 为父元素新的元素添加clear:both */
		.clear{
			clear:both;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #00f;
			float: left;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<!-- 在父级元素中添加新元素，设置clear:both -->
		<div class="clear"></div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

2、为父元素添加overflow:hidden属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		.wrap{
			border: 2px solid #f00;
			/* 为父元素添加overflow:hidden属性,清除浮动 */
			overflow: hidden;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #00f;
			float: left;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

3、为父元素添加伪类：after,对伪类设置clear:both

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		.wrap{
			border: 2px solid #f00;
		}
		/* 为父元素添加伪类after,清除浮动 */
		.wrap:after{
			clear: both;
			content: " ";
			display: block;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #00f;
			float: left;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

anh_qwh
关注
专栏目录
css-loader：CSS加载器
02-05
CSS加载器css-loader像import/require()一样解释@import和url()并将解析它们。入门首先，您需要安装css-loader ： npm install --save-dev css-loader 然后将插件添加到您的webpack配置中。 例如： file.js import ...
div CSS 清除float常用方法(:after和clear:both)
王鹤霖的专栏 三人行必有我师
02-02 925
 很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法： 首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们， after伪类由于受到ie6 7的不支持所以大多数时候，一般都需要定义一个固定的class名设置属性clear的值both的div 两
CSS之after clear
liujan511536的专栏
12-09 2645
clear属性只会影响使用它的元素，具体可以看我的这篇文章： http://blog.csdn.net/liujan511536/article/details/50086275 当我们给一个元素加上:after时，就是在这个元素内容的后面加上新的内容， 如： #demo:after { content:"--good" } hello world
css清除浮动的四种方式
m0_53195432的博客
07-16 234
当我们在用float的时候经常出现如图的问题。总结了击中css清除浮动的方式 一、给父级元素添加高度height 父级元素div无法获取到高度，给父级元素定义高度 height ，可解决浮动带来的问题。 优点：容易记忆、代码少、容易掌握。 缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级 div 不⼀样时，会产⽣问题。对于响应式布局会有很⼤影响。 二、父级元素div定义 overflow:hidden 添加之后，⽗元素会去适配所有⼦元素,即使脱离⽂档流的⼦元素,适配之后,...
更简洁的 CSS 清理浮动方式（使用 :after 伪类来提供浮动块后的 clear:both）
yaolei258的专栏
04-17 1627
前几天发现了一段css .clear:after {      content: ".";      display: block;      height: 0;      clear: both;      visibility: hidden; } .clear{     zoom:1; } 大概了解到这是用来清楚浮动的，但是对于after,content，
html中clearfix:after也clear:both有什么区别?
山鹰的专栏
09-16 2513
①:after是选择器，伪元素之一，用于在指定元素如clearfix后面添加内容，用content:"这里是内容";②clear:clear;是属性值，用于清除附近浮动元素的影响。
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out = postcss ( ) . use ( prefixer ( { ...
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS Pro布局 CSS库，用于构建响应式和可自定义的页面布局 文献资料 有关完整文档，请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout....
stylelint-config-css-modules:CSS模块可共享的stylelint配置
05-13
stylelint-config-css-modules CSS模块可共享的stylelint配置。 调整规则以接受特定的语法。 这对于覆盖预定义规则（例如。安装npm install stylelint-config-css-modules --save-dev 或者yarn add stylelint-config...
postcss-selector-not:PostCSS插件进行转换
05-06
postcss-selector-not PostCSS插件，将:not() W3C CSS 4级伪类转换为：not（）CSS 3级选择器 安装 $ npm install postcss postcss-selector-not 用法 使用此input.css ： p : not ( : first-child , . special ) {...
clear清浮动及after伪元素清浮动
王源偷我华子
12-11 225
clear:both的真正含义： 清除当前元素前面兄弟级浮动元素对当前元素的影响 最好的方法就是给当前元素添加一个伪类：：after，然后给他的样式添加上clear:both
用clearfix:after消除float:left的css浮动效果
weixin_30326515的博客
11-26 136
用clearfix:after消除 css浮动 在写HTML代码的时候，创造在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： <div style="border:2px solid red;"> <div style="fl...
::before ::after 以及 clear:left, right, both
飞驰的地铁
06-13 1210
对于::before, ::after, 发现以前理解错了，在这里记录一下。 起因 早上看 float 布局时， 突然想起以前学的 clear:both 清除浮动， 其中有个利用 ::after 伪元素的方法， 我动手试了一下, 一开始 ，我写成这样，如图： <div class="parent"> <div class="left"></div> ...
html css float left与 float right的使用说明
weixin_33719619的博客
02-12 824
点评： CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。但仅仅是如此吗？详细出处参考：http://www.jb51.net/css/33740.html No! 要注意以下几点： 1、 浮动元素会被自动...
clear 清空浮动的高级写法 :after 添加一个不可见层
ISaiSai的专栏
02-28 4785
.clear:after {   display: block;   content: '';   clear: both;   visibility: hidden; }
解决CSS中float:left后需要clear:both清空的繁琐步骤
weixin_34418883的博客
08-06 188
　　之前，因为公司专门有CSS+DIV的切片设计师，所以我一直都是注重程序的设计与开发。现在，因为接了一些Web网站的项目需要制作，就在空闲时间学习起了CSS、Jquery。 　　 　　现在，大部分的横排导航都是通过 ul -&gt; li *n -&gt; a 来实现的。具我所知，要达到这种效果，有几种方法可以实现。 　　1.传统处理方式： li {float:left;}/*这样，...
CSS基础(17)_使用clear/伪类after/类clearfix处理高度坍塌
no15870678621的博客
04-08 335
高度坍塌处理二
css中clear:both属性的理解及用法
热门推荐
Sfh的博客
06-27 1万+
css中clear:both属性的作用是清除浮动，设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题，可以认为，设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响 对比设置和不设置clear:both的结果来说明 <style> .test-title{ background-color: orange; } .test-con
CSS 伪类after清除浮动
黄彪博客
11-30 2953
文章目录文章参考问题描述重点代码 文章参考 用after伪类清除浮动 问题描述 以前总是加一个来解决，但这样会增加无语义的标签， 看到同事使用伪类 after 来实现，觉得代码更精炼，没有多余的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...
掌握两列布局：DIV-CSS技巧与浮动应用
关键在于使用CSS的`float`属性，将"side"设置为左浮动，使其不会占据整个行，而"main"则设置为左浮动并设置`margin-left`为"side"的宽度，实现了两列的并排布局。通过调整`margin-left`值，可以微调列与列之间的间隙...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值