HTML和CSS —— 7、浮动、BFC、塌陷

最新推荐文章于 2024-07-24 13:45:34 发布
最新推荐文章于 2024-07-24 13:45:34 发布
阅读量107 收藏
点赞数
分类专栏： HTML和CSS笔记 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46291458/article/details/108009880
版权

补充

一、盒子的大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定

​ box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

​ 可选值：

​ content - box 默认值，宽度和高度用来设置内容区的大小

​ border - box 宽度和高度用来设置整个盒子可见框的大小

​ width 和 height 指的是内容区 和 内边距 和 边框的总大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#red{
				background-color: red;
				width: 200px;
				height:200px;
				padding: 10px;
				border: 10px green solid;
				box-sizing: border-box;
			}
			#yellow{
				background-color: yellow;
				width: 200px;
				height:200px;
			}
		</style>
	</head>
	<body>
		<div id="red"></div>
		<div id="yellow"></div>
	</body>
</html>

二、轮廓阴影和圆角

2.1 轮廓阴影

属性：box-shadow

  • 用来设置元素的阴影效果，阴影不会影响页面布局

​ 第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动

​ 第二个值：垂直偏移量，设置阴影的水平位置，正值向下移动，负值向上移动

​ 第三个值：阴影的模糊半径

​ 第四个值：阴影的颜色

2.2 圆角度

属性：outline

  • 用来设置元素的轮廓线，用法和border一模一样

    ​ 轮廓和边框不同的点，就是轮廓不会影响可见框的大小，不会影响布局

属性：border-radius

  • 用来设置圆角，圆角设置圆的半径大小

    • border-top-left-radius:

      border-top-right-radius:

      border-bottom-left-radius:

      border-bottom-right-radius:

    • border-radius 可以分别制定四个角度的圆角

      ​ 四个值：左上 右上 右下 左下

      ​ 三个值：左上 右上/左下 右下

      ​ 两个值：左上/右下 右上/左下

2.3 三个属性整合代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#red{
			background: red;
			width: 200px;
			height: 200px;
			
		}
		#red:hover{
			/*background: green;*/
			box-shadow: 10px 10px 100px deeppink;
			border-radius: 100px;
			outline: 10px green solid;
		}
	</style>
	<body>
	<div id="red"></div>
	
	</body>
</html>

三、浮动

3.1 浮动介绍

  • 通过浮动可以使一个元素向其父元素的左侧或右侧移动

    • 使用 float 属性来设置于元素的浮动

    • 可选值：

      • none 默认值，元素不浮动
      • left 元素向左浮动
      • right 元素向右移动

    • 注意：元素设置浮动以后，水平布局的等式便不需要强制成立

      ​ 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

3.2 浮动的特点

  1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
  2. 设置浮动以后元素会向父元素的左侧或右侧移动
  3. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  4. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  5. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点一会发生变化！！！
脱离文档流的特点：
			块元素：
				1.块元素不在独占页面的一行
				2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开
			行内元素：
				行内元素脱离文档流以后会变成块元素，特点和块元素一样
		注：脱离文档流以后，不需要再区分块和行内元素了

四、高度塌陷和BFC

4.1 高度塌陷的问题

​ 在页面布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流子元素从文档流中脱离将会无法撑起父元素的高度，导致页面的高度丢失。

​ 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度坍塌是浮动布局中比较常见的。

4.2 BFC(Block Formatting Context — 块级格式化环境)

BFC是一个CSS中的一个隐藏属性，可以为一个元素开启BFC，
开启BFC该元素会变成一个独立的布局区域

  • 元素开启BFC后的特点：

    1. 开启BFC的元素不会被浮动元素所覆盖
    2. 开启BFC的元素子元素外边距不会重叠
    3. 开启BFC元素可以包含浮动的子元素

  • 可以通过一些特殊方式开启元素的BFC

    1. 设置元素的浮动（不推荐） 因为会脱离文档流导致页面布局混乱，但可以处于文档流中的标签添加clear属性，却也不能完全解决问题。

    2. 将元素设置为行内块元素（不推荐）

    3. 将元素的overflow设置为一个非visible的值

      ​ — 常用的方式 为元素设置 overflow:hidden 开启BFC，以使其可以包含浮动元素。

4.3、clear

由于box1的浮动，导致box3位置上移，也就是box3收到了box1浮动的影响，位置发生了改变。

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性清除浮动元素对当前元素所产生的影响。

  • clear

    • 作用：清除浮动元素对当前元素所产生的影响

    • 可选值：

      left	        清楚左侧浮动元素对当前元素的影响

right      	清楚右侧浮动元素对当前元素的影响

both    	  	清楚两侧中最大影响的那侧

    • 原理：

      ​ 设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

4.4、使用after伪类解决高度坍塌（方法四）

<!--设置边框上-->
<style>
    div::after{
		content:'';
        display:block;
        clear:left;
    }
</style>

解释：1.content’’ 现在这个元素的最后添加一个行内元素

​ 2.给这个行内元素转为块元素

​ 3.最后清楚浮动对他的影响

<!--案例-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*font{
				font-size:50px;
			}*/
			div#border{
				width: 500px;
				border: 10px red solid;
				/*float: left;*/
				/*display: inline-block;*/
				/*overflow:hidden;*/
			}
			div.box1{
				box-sizing: border-box;
				border: 5px black dashed;
				width:200px;
				height: 200px;
				background: yellow;
				float: left;
				margin-right: 20px;
			}
			div#box2{
				width:300px;
				height: 300px;
				background: green;
				/*clear: left;*/
			}
			/*after标签脱离文档流*/
			#border::after{
				content: '';
				display: block;
				clear: left;
			}
		</style>
	</head>
	<body>
		<div id="border">
			<div class="box1">
				<!--<font>1</font>-->
			</div>
			<div class="box1"></div>
		</div>
		<div id="box2">
			<!--<font>2</font>-->
		</div>
	</body>
</html>

4.5 使用clearfix解决高度坍塌问题(方法五)

clearfix这个样式可以同时解决高度坍塌和外边距重叠的问题，当你遇到这些问题时，直接使用clearfix这个类即可。

注：clearfix为需要解决高度坍塌添加的类名（规定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*font{
				font-size:50px;
			}*/
			div#border{
				width: 500px;
				border: 10px red solid;
				/*float: left;*/
				/*display: inline-block;*/
				/*overflow:hidden;*/
			}
			div.box1{
				box-sizing: border-box;
				border: 5px black dashed;
				width:200px;
				height: 200px;
				background: yellow;
				float: left;
				margin-right: 20px;
			}
			div#box2{
				width:300px;
				height: 300px;
				background: green;
				/*clear: left;*/
			}
			/*after标签脱离文档流*/
			/*#border::after{
				content: '';
				display: block;
				clear: left;
			}*/
			/*clearfix*/
			.clearfix::before,
			.clearfix::after{
				content: '';
				display: table;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="border" class="clearfix">
			<div class="box1">
				<!--<font>1</font>-->
			</div>
			<div class="box1"></div>
		</div>
		<div id="box2">
			<!--<font>2</font>-->
		</div>
	</body>
</html>

解释：1.content’ ’ 现在这个元素的最后添加一个行内元素

​ 2.给这个行内元素转为table

​ 3.最后清楚浮动对他的影响

这个方法不论是高度塌陷还是外边距重叠的影响都能清楚！！！

不能吃的莴苣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【html/css】从清除浮动 讲解 BFC 原理及应用
Umbrella_Um的博客
09-22 239
CSS中清楚浮动 在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...
CSS设置DIV边框为圆角，添加背景色溢出的问题
baliang9989的博客
09-01 2030
这么几天需要做一个类似于层级展示的东西，最后一层需要做一些div框来展示数据，我用css设置了div的边框为圆角，但是添加背景色的时候颜色溢出，覆盖了四个角的圆弧，效果如图所示： css代码如下： .demo{ position: absolute; top:0; height:100% ; border:1px solid #000;...
CSS3黑科技 - 内凹圆角
Jepson_鹏鹏的专栏
10-14 2万+
CSS3 黑科技 - 内凹圆角 - 径向渐变实现圆角，大家一定都会做，border-radius, 内凹圆角如何实现？可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解
Css3 圆角和渐变色问题(IE9)
weixin_34129145的博客
01-08 143
border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endColorstr='#095701', GradientType=0); 如图： 所以border-radius(圆角)和DXImageTransform.Microsoft.gr...
梳理浮动和BFC
牛先森家的博客
05-12 259
浮动： float：定义网页中其他文本如何环绕该元素显示 CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止 浮动的添加 float的属性值： left （元素左浮动） right （元素右浮动） none （默认值，不浮动） inherit （将会从父元素获取float值） 浮动的特点： 浮动的元素脱离文档流的，不占据空间 如果让多个元素横向排列，这些元素都要添加浮动 如果添加浮动的子元素总宽超过父元素的宽度，那么最后一个
html+css 清除浮动的相关技巧心得
09-24
HTML 和 CSS 中的浮动（Float）属性用于创建流式布局，使得元素可以在其容器内向左或向右移动，直到其边框接触到容器的边框或其他浮动元素的边框。这种设计模式在网页布局中非常常见，特别是对于创建多列布局。然而...
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
总结起来，HTML和CSS中的高度塌陷、浮动和定位问题可以通过理解和应用BFC、创建清除浮动的方法来有效解决。在实际开发中，我们需要灵活运用这些技巧，以确保页面布局的稳定和预期效果。对于开发者来说，掌握这些基本...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的...BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部
10分钟理解CSS BFC原理及其应用
09-27
2. **包含浮动元素（Clearing Floats）**：BFC可以包含其内部的浮动元素，防止因浮动元素导致的父元素高度塌陷。当父元素触发BFC（如设置`overflow: hidden`），它会自动扩展以包裹所有浮动的子元素。 3. **防止...
css如何清除浮动常用的方法有哪些
09-25
在CSS布局中，浮动元素（float）经常被用于创建多列布局、图像对齐等，但浮动元素会导致其父元素的塌陷，即父元素无法完全包含浮动子元素，这通常需要我们采取措施来清除浮动。以下是三种常用的清除浮动方法： 1. *...
css实现内凹圆角，利用圆角反向进行（转）
热门推荐
海天酱油zz
10-17 4万+
最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是通过径向渐变实现的。虽然能实现单个角，但是当四个角合在一起就很麻烦了。 上设计图 径向渐变实现： background:radial-gradient(40rpx at right bottom,transparent 50%,#1889F6 50%); 但是如果四个重合在一起，我的图片背景是渐变的，那...
关于:after和:before伪类的用法，以及让浮动占据高度问题。
kelvinbean的博客
07-22 9455
第一次写技术博客。写得不好的话，大神们请见谅啊。 前段时间有个搞前端搞得还不错的朋友去面试，被问到了一个问题。就是怎么用一个标签画出一个铅笔状的图形。就像下图这样。 当时我还有点懵，感觉一个标签做不到啊。最少两个。一个div画个正方形，一个div画个三角形。还百度了好久都没找到解决方案。 应该很多人都知道怎么不用一个div画个三角形吧？如果实在不知道的话，我这里也可以说一下，就是使用
用clearfix:after消除（DIV块因内部浮动而高度收缩的问题）
z69183787的专栏
02-05 4012
在写HTML代码的时候，创造在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： TEST DIV CSSBBS TEST DIV TEST DIV TEST DIV 运行这段代码，大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 326
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 303
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
最新发布
oThrowsException的博客
07-24 535
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 690
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 272
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值