CSS浮动

举报
牛哄哄的柯南 发表于 2021/05/26 17:57:16 2021/05/26
【摘要】 CSS浮动 浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动 浮动的父子关系浮动影响父层盒子高度 overflow属性溢出处理 清除浮动 浮动的特性 1.浮动主要用于使得div脱离标准文档流,生成多列布局 2.浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外...

浮动的特性

1.浮动主要用于使得div脱离标准文档流,生成多列布局
2.浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动,都会紧挨着上一个元素)
3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动,宽度足够的话,会排在一行 、脱离文档流 、提升层级半级(也就是说:一个元素设置了浮动属性后,下一个元素就会无视这个元素的存在,但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围)。

注意:不管是行级还是块级元素,如果设置了浮动属性,该元素就变成了具有inline-block属性的元素。

float属性

属性 说明
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动

下面我们用三个div来设置不同情况的div浮动来通过例子来理解float以及overflow。

三个div都不浮动

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> .class1 { width: 200px; height: 100px; background: palegreen; } .class2 { width: 250px; height: 130px; background: gold; } .class3 { width: 300px; height: 180px; background: red; }
		</style>
	</head>
	<body> <div class="class1">我是块级元素1,没有设置浮动</div> <div class="class2">我是块级元素2,没有设置浮动</div> <div class="class3">我是块级元素3,没有设置浮动</div> </body>
</html>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

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

在不设置浮动的情况下,三个div块会竖着在一列显示

第一个div浮动

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> .class1 { width: 200px; height: 100px; background: palegreen; float: left } .class2 { width: 250px; height: 130px; background: gold; } .class3 { width: 300px; height: 180px; background: red; }
		</style>
	</head>
	<body> <div class="class1">块级元素1,设置浮动</div> <div class="class2">块级元素2,没有设置浮动,块级元素2,没有设置浮动,块级元素2,没有设置浮动,块级元素2,没有设置浮动</div> <div class="class3">块级元素3,没有设置浮动</div> </body>
</html>



  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

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

故意将第二个div块中的内容写得多点,我们可以得出下面的结论:
1.没有设置浮动的元素会填充浮动元素留下来的空间
2.浮动元素会和非浮动元素发生重叠,浮动元素会在图层的最上面
3.使用浮动时,该元素会脱离文档流,后面的元素会无视这个元素,但文本依然会为这个浮动元素让出位置,并且元素中的文字内容会环绕在其周围。

第二个div浮动

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> .class1 { width: 200px; height: 100px; background: palegreen; } .class2 { width: 250px; height: 130px; background: gold; float: left } .class3 { width: 300px; height: 180px; background: red; }
		</style>
	</head>
	<body> <div class="class1">块级元素1,没有设置浮动</div> <div class="class2">块级元素2,设置浮动</div> <div class="class3">块级元素3,没有设置浮动</div> </body>
</html>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

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

由此我们可以很明显的看出:
浮动元素不会超越其前面的元素

三个div都浮动

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> .class1 { width: 200px; height: 100px; background: palegreen; float: left } .class2 { width: 250px; height: 130px; background: gold; float: left } .class3 { width: 300px; height: 180px; background: red; float: left }
		</style>
	</head>
	<body> <div class="class1">块级元素1,设置浮动</div> <div class="class2">块级元素2,设置浮动</div> <div class="class3">块级元素3,设置浮动</div> </body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

效果截图:
浏览器宽度足够时,三个div会并排排列 。
在这里插入图片描述
当我们发大页面时,浏览器宽度不足以容纳最后一个div时,最后一个div掉下来,并且顶部不会超过倒数第二个div的底部。
在这里插入图片描述

浮动的父子关系

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> #wrap2 { width: 55px; height: 90px; border: 3px solid red; } .class1 { width: 20px; height: 40px; background: blue; float: left; } .class2 { width: 20px; height: 30px; background: yellow; float: left; } .class3 { width: 20px; height: 30px; background: fuchsia; float: left; } .class4 { width: 20px; height: 20px; background: chartreuse; float: left; }
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2"> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div> </div>
	</body>
</html>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

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

由此我们可以得到下面的结论:
1.浮动元素不会在其浮动方向上溢出父级的包含块 也就是说元素左浮动,其左外边距不会超过父级的左内边距,元素右浮动,其右外边距不会超过父级的右内边距 。
2.浮动元素的位置受到同级同向浮动元素的影响 也就是说同一父级中有多个浮动元素,后一个元素的位置会受到前一个浮动元素位置的影响,他们不会相互遮挡,后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位,如果当前空间不足,则会换行,否则会放置在前一个浮动元素的下面。

浮动影响父层盒子高度

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> #wrap2 { width: 55px; border: 3px solid red; } .class1 { width: 20px; height: 40px; background: blue; float: left; } .class2 { width: 20px; height: 30px; background: yellow; float: left; } .class3 { width: 20px; height: 30px; background: fuchsia; float: left; } .class4 { width: 20px; height: 20px; background: chartreuse; float: left; }
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2"> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div> </div>
	</body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

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

由此我们可以得到下面的结论:
父元素的高度靠子元素撑开,子元素全部浮动后,均脱离文档流,父元素高度塌陷。

overflow属性

overflow属性 说明
visible 默认值。内容不会被修剪,会呈现在盒子之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

overflow属性的妙用:
配合着浮动父容器,解决父容器高度他塌陷的问题。
使用overflow扩展盒子高度,overflow属性会触发浏览器重新计算父元素盒子高度。

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> #wrap2 { width: 55px; border: 3px solid red; overflow: hidden; } .class1 { width: 20px; height: 40px; background: blue; float: left; } .class2 { width: 20px; height: 30px; background: yellow; float: left; } .class3 { width: 20px; height: 30px; background: fuchsia; float: left; } .class4 { width: 20px; height: 20px; background: chartreuse; float: left; }
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2"> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div> </div>
	</body>
</html>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

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

溢出处理

样例代码:

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <style> #d1{ /* 容器 */ border: solid 1px red; height: 200px; width: 150px; /* overflow: visible; */ /* overflow: hidden; */ /* overflow : scroll; */ /* overflow: auto; */ overflow-x: scroll; } #d2{ /* 出现移除的内容*/ width: 180px; border: solid 2px green; } </style> </head> <body> <div id="d1"> <div id="d2">222222</div> </div> </body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

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

当d2的宽度超过了父级d1的宽度时,我们可以通过设置不同的overflow属性值来实现不同的解决办法,我所演示的是浏览器会显示滚动条以便查看其余内容。

清除浮动

clear属性 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值,允许浮动元素出现在两侧

样例代码:

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <style> .container{ border: solid 1px blue; } .class1 { width: 200px; height: 100px; background: palegreen; float: left; } .class2 { width: 250px; height: 130px; background: gold; float: left; } .class3 { width: 300px; height: 180px; background: red; float: left; } /* .clear{ clear: both; } */ </style> </head> <body> <div class="container"> <div class="class1">我是块级元素1</div> <div class="class2">我是块级元素2</div> <div class="class3">我是块级元素3</div> <div class="clear">牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div> </div> </body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

没有清除两侧浮动效果截图:
在这里插入图片描述
把代码中的这段代码的注释去掉,来清除两侧浮动

/* .clear{ clear: both;
} */

  
 
  • 1
  • 2
  • 3

清除两侧浮动效果截图:
在这里插入图片描述

可以很明显的看出:
清除两侧浮动后,有扩展父级盒子高度的作用

写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

在这里插入图片描述

加油!

共同努力!

Keafmd

文章来源: keafmd.blog.csdn.net,作者:牛哄哄的柯南,版权归原作者所有,如需转载,请联系作者。

原文链接:keafmd.blog.csdn.net/article/details/109520700

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200