CSS笔记
标签可以直接锁定 h1{color:red;}
class需要 .say{color:red;}
id属性需要 #earthy {color:red}
同一个标签可以有两个不同的class，名字写在同一个class属性中用空格分隔开
通配选择器 * {color:red;}
在html内引入css最标准的做法为，在标签内加入
盒模型的宽度:左右外边距+左右边框+左右内边距+width
盒模型的高度:上下外边距+上下边框+上下内边距+height
/* 这是一个注释 */
!important 可以用来提高优先级(方便测试)例如：
.tipText {
color: red !important;
}
css中的单位：
px 最常用，像素
mm 毫米
cm 厘米
vh 视口高度的百分比（你的浏览器页面大小）
vw 视口宽度的百分比
补充：
vh/vw —— 旧标准，固定视口；
vb/vi —— 新标准，动态视口，更智能。
选择器：
标签选择器
p {
text-align: center;
color: red;
}
id选择器
#para1 {
text-align: center;
color: red;
}
类选择器
.center {
text-align: center;
color: red;
}
交集选择器
p.center {
text-align: center;
color: red;
}
通用选择器
* {
text-align: center;
color: blue;
}
并集选择器
.center,
.dog,
.pig{
font-size:50px;
background-color:blue
}
后代选择器
指定选中父代ul中的后代li标签（选中所有后代）
ul li{
color:red
}
子代选择器（儿子辈）
div>a {
color:red;
}
相邻兄弟选择器
向下选择紧紧相邻的目标兄弟元素
div+a {
color:red;
}
/选中div下紧紧相邻的a元素/
通用兄弟选择器
向下选中所有的目标兄弟元素
div~a {
color:red;
}
------------
虚拟选择器(伪类选择器)
伪类：很像类，但不是类（class），是元素特殊状态的一种描述
一・动态伪类：
(须搭配a标签使用)
:link ：尚未被点击时可以套用样式
:visited ：已经被点击时可以套用样式
(所有元素都可以具备的状态)
:hover ：当指针位于超链接字符串或在此元素上时可以套用样式
:active ：单击时可以套用样式
标准顺序：link--visited--hover--active
:target : 突出显示活动的锚,前面放活动目标的标签或属性 详见：/零散笔记/伪类选择器：target.html
(须搭配输入框等使用)
:focus ：获得焦点时可以套用样式（须搭配对话框等使用）
input:focus{
background-color="green"
}
注意：样式表在执行时是有顺序的，越下方的指令优先级越高
所以":hover"需放在":link"的后面，否则会看不到
"active"需放在":hover"的后面，否则会看不到
ps：若不作出字体大小调整，则会继承上一步行为的字体大小
二・結構（けっこう） 结构伪类：
/选中div下的第一个子元素p/
按照所有兄弟元素计算
div>p:first-child{
color:red;
}
注意：first-childの範囲「はんい」は全部なdivです。第一のｐではありません。|所以要同时满足第一个和p标签 这两个条件才会被选中
div p:first-child{
color:red;
}
注意：选中的是div的后代p元素，且p元素的父代是谁无所谓，但p元素必须是其父代的第一个子代元素（每个符合条件的元素都会被选中）
p:first-child{
color:red;
}
注意：判断每个结构块中的第一个元素，若为p元素则选中。
例えば：
:last-child 最后一个...元素
:nth-child(num) 第n个...元素 nth（第n个元素） 括号里既可以写公式也可以写关键词
括号里的公式必须是an+b的形式。
まとめ：
选中前多少个可以用公式-n+num num为前多少个数字。 注意：num-n不可以！
1.0或不写：什么都选不中 ——几乎不用
2.n：选中所有子元素 ——几乎不用
3.1~正无穷的整数 选中对应序号的子元素
4.2n或even： 选中序号为偶数的子元素
5.2n+1或odd： 选中序号为奇数的子元素
6.-n+3 选中前三个（3可以换成其他）
:first-of-type 第一个相关的元素，即本元素类型中的第一个元素。按照所有“同类型”的兄弟元素计算
:last-of-type 最后一个相关的元素，即本元素类型中的最后一个元素。按照所有“同类型”的兄弟元素计算
:nth-of-type 第n个相关的元素，即本元素类型中的第n个元素。按照所有“同类型”的兄弟元素计算
:nth-last-child() 倒序第n个元素，按照所有的兄弟元素计算。
:nth-last-of-type() 倒序第n个相关元素，即即本元素类型中的倒数第n个元素。按照所有“同类型”的兄弟元素计算
:only-child 目标元素为父级元素的唯一一个子代元素。
:only-of-type 目标元素为父级元素的唯一一个同类型的子代元素。
:root 前面不需要加任何标签，选中的是html标签，即网页的最底层界面。
:empty 可以选中没有内容的元素。（里面什么都没有，连空格也没有）
三・否定（ひてい） 否定伪类：
:not(css选择器) 排除满足括号中条件的元素。关键词：禁用
例えば：
/* 选中的是div的子代p元素，但是排除类名为fail的元素 */
div>p:not(.fail) {
color:red;
}
效果见10.否定伪类.html
/* 选中全部以頑張って开头的title所对应的元素 */
div>p:not([title^="頑張って"]) {
color:red;
}
效果见10.否定伪类.html
四・UI伪类
:checked 选中勾选的复选框或单选按钮，与:focus略有不同。
:disabled 选中被禁用的表单元素。disabled是一个通用属性值，可以起到禁用标签的作用，详见html笔记最下面的通用属性。
:enabled 选中可用的表单元素。(一般情况写不写效果都一样)
五・ターゲット 目标伪类：
:target 选中锚点指向的元素。详见12.目标伪类.html。注意：选中的不是超链接，而是目标元素。
六・言葉 语言伪类:
:lang() 括号内为语言类型，根据指定的语言选择元素。注意:前面可以不放标签名，即选中所有符合条件的元素。当标签没有特地添加lang属性时，默认与标签的lang相同。
效果详见13.语言伪类.html
伪元素选择器
伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置
::first-letter 选中目标元素中的第一个字符
::first-line 选中目标元素的第一行（在浏览器界面的第一行）
::selection 选中鼠标选中的部分（即鼠标长按左键拖动产生的范围）可以定义背景色和字体颜色等。 selection，选择
::placeholder 选中目标input的placeholder属性所对应的属性值。
::before 选中目标元素最开始的位置，随后创建一个子元素（必须用contont属性指定内容） （注：被添加的内容不能被复制） before 在...之前。
::after 选中目标元素最后的位置，随后创建一个子元素（必须用contont属性指定内容）
选择器的优先级：
简单：
1.同类型选择器后来者居上。
2.行内样式>ID选择器>类选择器>元素选择器>通配选择器（越精细优先级越高）
详细： 权重计算方法
格式：(a,b,c)
a:ID选择器的个数
b:类、伪类、属性 选择器的个数
c:元素、伪元素 选择器的个数
将(a,b,c)都计算出来，然后分别依次进行比较，计算权重，权重大的优先级高。
按顺序进行比较，若有一方胜出了，则后面的都不看，胜出方的优先级高。
例えば：
.container span.slogan{ (0,2,1) 胜
color:red;
}
div>p>span:nth-child(1){ (0,1,3)
color:green;
}
若权重相同则后来者居上。(VSCode中把鼠标悬浮在选择器上可以直接看见权重)
计算权重时需要注意：并集选择器的每一个部分都是分开计算的
注意：!important 最大，甚至比行内样式还要大。可以在属性值的后面加上 !important
例えば：
.slogan {
color:red !important;
}
冷知识：cm和mm可以在网页中作为长度单位，但没有像素（px）精细。vh是视口单位的百分比(你的浏览器画面大小)
属性：
width/height:
固定单位：
px 像素
em/rem 基于字体大小的相对单位，em相对于当前元素，rem相对于根元素。
相对单位：
% 相对于父元素宽度的百分比
vw/vh 基于视口宽度/高度的百分比
自适应：
auto 默认值。
min-content/max-content 分别按内容最小/最大宽度调整
fit-contnet 结合元素与可用空间自适应
相关衍生属性
min-width/max-width 限制元素宽度的最小/最大值
color:
颜色的四种表达方式
颜色名字：
color:bule; 官方设定好的颜色
rgb颜色或rgba颜色。
color:rgb(255,0,0) rgb颜色，红，绿，蓝 紫罗兰色138,43,226
color:rgb(100%,0%,0%) rgb颜色(也可以写百分比)
color:rgba(255,0,0,0.5) 相较于rgb多了最后一位透明度,透明 0~1 不透明。透明度也可以写百分比(哪怕前面用的是数字) 甚至能把0省略，就写.5
HEX颜色或HEXA颜色：(字母不区分大小写)(HEX就是十六进制的意思)
color:#ff0000 HEX颜色是#加上三个十六进制的数字组成的。如果两两重复也可以简写。例如#ffccdd 可以简写成#fcd。(只限于两两重复的，且透明度也只能用一位)
color:#ff00ff00 与HEX相比多出来的两位就是透明度。范围也是 透明00~ff不透明
注意：IE内核的IE浏览器不支持HEXA，但支持HEX
HSL或HSLA：(本人不懂，也不常用)
color:hsl(色相,饱和度,亮度) 色相里填角度（单位deg，可省略，0360deg），饱和度：0%100%，亮度0%~100%
color:hsl(0deg,100,50%)
color:hsla(0deg,100,50%,0.678) 与hsl相比多出来的一个位置是透明度
font-size:40px 字体大小.chrome浏览器能接受的最小值为12px。但如果为0就没了。Chrome浏览器中，设置-自定义字体-最小字号 处可以更改浏览器能接受的最小字体。如果不写，默认16px(会随浏览器字号的变化而变化)。可以给body加字号，从而实现控制所有字体，防止混乱。font-size实际上修改的是字体设计框的高度(其宽度也会自适应改变)
font-family:"微软雅黑" ,"华文彩云" 更改字体，默认微软雅黑。可以同时写多个，依次生效(若第一个不生效则会依次往下走)在系统设置-字体 处可以看到电脑上自带的全部字体。也可以用自己下载的，但不建议，因为其他用户很可能没有安装。引号不是必须的。
字体分为“衬线字体”与“非衬线字体”。衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。(比较有棱角感)
sans-serif 非衬线字体，可以放在family后面，让系统自动拿出一款非衬线字体。
serif 衬线字体
如果字体名称有空格，必须用引号引起来
用字体的英文名兼容性会更好
font-style: 字体风格（即斜体）
常用属性值一般有：
normal 正常的，保持原样
italic 会尝试着寻找当前字体设计师所设计的斜体应用，若没有找到则强制斜体。italic 斜体
oblique 强制斜体
font-weight: 字体粗细
normal 正常的，保持原样
lighter 细的
bold 粗的
bolder 更粗（大多数字体没有，比如微软雅黑只有三种粗细程度）
font-weight:100 还可以写数值，取值范围1001000整百数字，没有单位。（大多数字体没有设计那么多粗细程度，鸿蒙字体有）100300等于lighter，400~500等于normal，600及以上等于bold
字体复合属性:
.font_value{
font:bold italic 100px "华文彩云","华文琥珀"
}
font后面可以直接跟各个属性值，规则如下：
最后两项一定要是字体大小(font-size)和字体族(font-family)，必须都得写上且顺序不能变。其他属性值在他们两个的前面，不受限制。
各个属性值之间用空格隔开
实际开发中更推荐复合写法，但这并不是绝对的
字体间距:
数值可以为0(等于没写)或负值(让间距缩小)
字符间距
letter-spacing:20px 字符之间的间距，letter 字符；spacing 间距。
单词间距(以空格为区分)
word-spacing 单词间距
text-decoration: 字体修饰
overline 上划线
underline 下划线
line-through 中划线（删除线）
none 没有线
underline dotted 虚线
underline wavy 波浪线
后面还可以接颜色color(没有顺序要求)
underline dotted red 红色虚线
text-indent:80px 文本缩进 indent vt.缩进
text-align: 元素中文本对齐 align v.排列，排整齐
(可以用flex布局代替)
left(默认)
center
right
line-height: 行高(从一行的最顶端到最低端，包含文字部分) 最好不要把行高设置成与字体大小相等
100px 像素写法
normal(默认) 浏览器自己匹配一个合适的行高
1.5(常用) 数值写法，数值表示font-size的倍数(通常1.5~2倍为适宜)
150% 百分比写法
注意点:
1.行高过小会导致文字重叠，且最小值为0(若比0小则会出现属性不可用，从而使浏览器把效果改为默认的normal)
2.行高是可以继承的（px是固定的，可1.5数值会随着font-size的改变而使效果发生改变）
3.一行的行高会以这行文字里最高的行高为准
4.line-height与height是什么关系？
设置了height,高度就是height的值
没有设置height,高度就是line-height*行数
小技巧:使单行文字在div中垂直居中
vertical-align: 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。vertical adj.垂直的
baseline(默认) 使元素的基线与父元素的基线对齐(字体有基线)
top 使元素的顶部与其所在行的顶部对齐
middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐
bottom 使元素的底部与其所在行的底部对齐
特别注意:vertical-align不能控制块元素
CSS列表属性，只能用在ul、ol、li元素上
list-style-type: 设置列表符号
常用值
none 不显示前面的标识(很常用!)
square 实心方块
disc 圆形
decimal 数字
lower-roman 小写罗马字
upper-roman 大写罗马字
lower-alpha 小写字母
upper-alpha 大写字母
...还有很多其他的，需要时查询
list-style-position: 设置列表符号的位置
inside 在li的里面(但都一样不可被鼠标选中)
outside 在li的外面
list-style-image: 自定义列表符号
url(图片地址)
list-style: 复合属性，没有数量和顺序的要求
CSS表格属性
边框相关属性(其他元素也能用，也能添加边框)
width、color、style均可取1-4个值，与margin相同
border-width: 边框宽度 属性值:CSS中可用的长度值
border-color: 边框颜色 属性值:CSS中可用的颜色值
border-style: 边框风格(款式)
none(默认值) 无线
solid 实线
dashed 虚线
dotted 点线
double 双实线
对于前三项属性也可以分写：
border-left-color
border-left-width
...
合写：
border: 设置4个方向的边框属性，对属性值没有数量、顺序的要求
border-radius: 设置元素边框的圆角半径
提示：
对于内容溢出的部分可以通过设置overflow: hidden;属性进行裁剪。
更多详细见overflow属性详解
overflow
visible 内容溢出时不会裁剪，直接显示在容器外部。不会触发滚动条
hidden 溢出内容被裁剪，不可见。常用于实现圆角容器内部元素的裁剪（如 border-radius 生效）。
scroll 无论内容是否溢出，都会显示滚动条（水平和垂直）。如果内容未溢出，滚动条不可用（但依然占据空间）。
auto 仅在内容溢出时显示滚动条（智能判断）
overflow的分写
overflow-x: auto;
overflow-y: hidden;
margin
父子之间用padding,兄弟之间用margin
外边距，可以理解为当前元素与父级或其他兄弟级元素之间的距离
margin的合写：
1.margin为4个值时,值与方向的对应顺序为上-右-下-左（从顶部开始，顺时针方向）
2.margin有三个值时，对应上-左右-下
3.margin有两个值时，对应上下-左右
4.margin有一个值时，四个方向都设置为这个属性值
margin的分写：
-top:
-bottom:
-left:
-right:
margin的特殊应用：将元素的水平方向margin的值设置为auto，能够让块元素在父级当中水平居中
padding
内边距，可以理解为当前元素与元素边框之间的距离
与外边距margin相同
list-style-type:
-none 去除li标签前面的小黑点
如何实现图片背景？
https://www.kdun.com/ask/441175.html
background-image:url('background.jpg')
background-position: center; /* 背景图片居中 /
background-repeat: no-repeat; / 背景图片不重复 /
background-size: cover; / 背景图片覆盖整个页面 */
position
相对布局和绝对布局。。。可以用于把文字写在图片上
教学视频：https://www.bilibili.com/video/BV1R34y157CF?vd_source=5c493598f60a54beeceaa166a351548a
absolute 绝对定位：元素脱离文档流，不占位。其定位参考是最近的定位祖先（即最近的非 static 定位祖先元素），如果找不到则相对于初始包含块
relative 相对定位：相对于原位置进行移动。元素仍保留在文档流位置，但可以相对于自身原始位置用 top/right/bottom/left 偏移（偏移并不影响其他元素占据的空间）。
fixed 固定定位：元素相对于浏览器视口（viewport）进行定位，而不是相对于其父元素或文档流。
让元素脱离文档流。用于创建菜单或选项
transform:
translate(-50%, -50%); 让元素自身向左、向上移动自身元素一半的宽高。是“固定定位 + translate”的黄金搭档。
常用top:50%;left:50%;transform: translate(-50%, -50%);来实现元素完美居中
flex:
flex:1 是 CSS Flexbox 布局中的一个简写属性，它让 flex 项目(子元素)能够自动扩展以填充容器中的可用空间。
条件：父容器是 Flex 容器（display: flex）。
是一下三个属性的简写
flex-grow: 1 - 定义项目的放大比例
flex-shrink: 1 - 定义项目的缩小比例
flex-basis: 0 - 定义项目在分配多余空间之前的默认大小
display:
none 隐藏界面(不占据布局空间)
block 将该元素变为块级元素
z-index 控制定位元素在垂直于屏幕方向（Z轴）上的堆叠顺序。决定哪个元素在前，哪个元素在后
只对设置了position属性且值不为static的元素有效
auto: 默认值，堆叠顺序与父元素相同
整数值（正负均可）: 数值越大越靠前
比较规则：
1.同一堆叠上下文中，z-index值大的元素覆盖值小的
2.不同堆叠上下文之间，比较的是上下文根元素的z-index
opacity
修改元素不透明度
0.0(全透)~1.0(全不透)
visibility 用于控制元素的可见性，但保持元素在文档流中的位置和空间占用。
特性表现：
1.元素不可见，被隐藏（完全透明）
2.元素内容不可交互（无法点击、选择或聚焦）
3.但元素仍然占据原来的空间
与display:none的区别
visibility占据空间、渲染但不显示、支持动画
display:none 不占据空间、不渲染、也不支持动画
visible 默认值。元素可见
hidden 元素不可见但占据空间
collapse 对表格行/列使用，类似hidden
规则：
@keyframes 规则（结合animation属性使用）
CSS 中用于定义动画序列的特殊规则
必须指定一个动画名称
1.语法结构：
@keyframes 自定义动画名称 {
关键帧选择器 {
样式属性: 值;
/* 更多样式... /
}
}
2.动画名称：
不能使用CSS保留关键字
3.关键帧选择器（支持四种格式）
百分比写法（最灵活）
@keyframes example {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
from/to 写法（简单动画）
@keyframes example {
from { opacity: 0; } / 等价于 0% /
to { opacity: 1; } / 等价于 100% /
}
单关键帧（需与其他规则配合）
@keyframes flash {
50% { opacity: 0; } / 只定义中间状态 /
}
多属性组合
@keyframes moveAndFade {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
两个动画属性
transform 用于对元素进行几何变换，包括：
位移（translateX/Y/Z）
旋转（rotate）
缩放（scale）
倾斜（skew）
3D变换（translate3d, rotate3d 等）
opacity 控制元素的透明度
@media 是 CSS 的媒体查询（Media Query）功能，用于根据设备的特性（如屏幕宽度、分辨率、横竖屏等）应用不同的样式规则。可以用于制作移动端
基本语法：
@media [媒体类型] and (媒体条件) {
/ 符合条件的 CSS 规则 */
}
媒体类型：
指定设备类型，常见的有：
screen（屏幕设备，默认值）
print（打印时生效）
speech（屏幕阅读器）
示例：打印时隐藏某个元素
@media print {
.no-print {
display: none;
}
}
媒体条件（关键部分）：
min-width：视口宽度 ≥ 指定值时生效
max-width：视口宽度 ≤ 指定值时生效
orientation：横屏（landscape）或竖屏（portrait）
resolution：屏幕分辨率（如 min-resolution: 2dppx）
各设备的默认值：
/* 默认样式（PC端） */
.container {
width: 1200px;
}
/* 平板设备（768px ≤ 宽度 ≤ 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
width: 90%;
}
}
/* 手机设备（宽度 ≤ 767px） */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 10px;
}
}
横竖屏适配：
@media (orientation: portrait) 竖屏
@media (orientation: landscape) 横屏
动画效果：
transition(简单动画):
transition: [property] [duration] [timing-function] [delay];
transition-property: 指定应用过渡效果的 CSS 属性名称
none
all
width - 宽度变化
height - 高度变化
background-color - 背景色变化
opacity - 透明度变化
transform - 变形效果
...
transition-duration: 0.5s; 设置过渡动画的持续时间
transition-timing-function:
ease - 默认，慢→快→慢
linear - 匀速
ease-in - 慢开始
ease-out - 慢结束
ease-in-out - 慢开始和结束
cubic-bezier(n,n,n,n) - 自定义速度曲线
transition-delay: 0.2s; 设置过渡效果的延迟时间
cursor: pointer 将鼠标光标变为手形指针，表示这个元素是可点击的。
animation(复杂动画):
完整语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name (必需) 指定要应用的 @keyframes 动画名称
animation-duration (必需) 定义动画完成一个周期所需时间。单位: s(秒)或ms(毫秒)
示例
animation-duration: 2s;
animation-duration: 500ms;
animation-timing-function 定义动画的速度曲线
ease (默认): 慢快慢
linear: 匀速
ease-in: 慢开始
ease-out: 慢结束
ease-in-out: 慢开始和结束
cubic-bezier(n,n,n,n): 自定义曲线
steps(n): 分步动画
animation-delay 定义动画开始前的延迟时间。
animation-iteration-count 定义动画播放次数
1 (默认): 播放一次
infinite: 无限循环
n: 具体数字(如2.5)
animation-direction 定义动画播放方向
normal (默认): 正常播放
reverse: 反向播放
alternate: 轮流正反向
alternate-reverse: 先反向再正向
animation-fill-mode 定义动画执行前后如何应用样式
none (默认): 回到初始状态
forwards: 保持结束状态
backwards: 立即应用第一帧
both: 同时应用forwards和backwards
animation-play-state 控制动画播放状态
running (默认): 正在播放
paused: 暂停
整体布局:
grid表格布局和flex盒子布局
float-浮动布局：
可以把网页看作一个水槽，将需要浮动的元素比作一块积木。如果给元素（积木）设置了float属性，水槽里就有水了
元素（积木）首先应该往上浮起来。如果设置的是float:left;向左浮动，那么元素（积木）从右边向上浮起来到水面，然后向左浮动到水槽的左边。
如果给元素设置的是float:right;向右活动，那么元素先从左边浮起到水面，然后向右浮动到水槽的右边，以此类推
属性功能：
设置一个元素发生浮动，浮动后的元素默认大小为内容大小，并且可以设置宽高，也可以与其他浮动元素或行元素处于同一行
浮动是在所在的父元素的范围内浮动的
基本语法：
float:left;
属性值：
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示其在文本中出现的位置
inherit 规定应该从父元素继承float属性的值
可能会遇到的问题：
在页面布局中经常会出现这样的现象——父元素本来应该由内容撑开高度，但由于内部子元素的布局要求，需要对内部的子元素进行浮动。元素一旦浮动，就会脱离文档流，父级元素就相当于“少”了内容，或者说是浮动的这个元素不再对父级元素的高度产生任何作用或影响
浮动元素会对兄弟元素造成影响，但是仅针对他后面的兄弟元素，并不会对前面的兄弟元素造成影响（见css笔记1_1.html)
清除浮动:
clear属性用于清除浮动，规定哪一侧不允许存在其他浮动元素
注意：清除浮动，并不是把浮动元素删掉，而是取消掉"浮动元素效果"对其他元素造成的影响
clear:both;
clear属性的属性值：
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值，允许浮动元素出现在两侧
inherit 规定应该从父元素继承clear属性的值
为兄弟元素设置clear样式：
若父元素当中存在三个div，第二个元素发生了浮动，这时候只需要为第三个div元素设置clear属性即可
例见文件"css笔记1_2.html"
注意：
1)并非浮动元素的所有兄弟元素都需要清除浮动，只需要针对浮动元素的下一个兄弟元素设置清除浮动，后面所有布局都会恢复
2)如果希望在第二个div(浮动元素)与第三个div(清除浮动的兄弟元素)之间有一定的间距，为浮动元素后的一个兄弟元素设置顶部外边距时会失效(与上方空白处叠加)，此时可以为浮动元素设置下边距
使用空标签/
标签清除浮动元素
例见"css笔记1_3.html"
缺点：结构与表现未分离
为当前浮动元素的父元素设置overflow:hidden或auto
优点：语义化没问题，同时代码量小
缺点：内容多的时候会被隐藏，无法显示需要溢出的元素，也可能会对之后JS的一些动态效果操作造成影响
为当前浮动元素的父级元素添加after伪元素，为after伪元素设置清除浮动的功能代码(使用最频繁)
优点：语义化和结构化都没有问题
缺点：如果使用不合理，有可能造成代码量的增加
after伪元素清除浮动效果其实与空标签同理
提示：记得为after设置内容，对于伪元素来说，如果没有内容则不会显示在页面当中
.clearbox:after{
content:'\200B'; //表示一个零宽度的空格（防止内容干扰页面）
display:block; //将伪代码设置为“块级元素”
height:0; //防止高度对页面造成影响
clear:both;
}
flex布局：
使用语法：
块元素：display:flex;
行内元素：display:inline-flex;
浙公网安备 33010602011771号