HTML5+CSS3快速入门浮动，高度塌陷，伪元素清除浮动每日一篇day05

本文链接：https://blog.csdn.net/m0_47268176/article/details/109859493

teacherDay05

布局第二大块盒模型行内块

行内块并排缺点：

中间有间距
文本内容行数多少不一样的时候会出现对不齐现象

浮动属性

作用：专业解决并排

float: left左侧浮动/right右侧浮动/none不浮动;
float:none;默认值  标准状态

标准流 浏览器解析块元素从上到下一行一个垂直排列行内元素并排中间有间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJ6qK6UR-1605867640024)(media/标准流.png)]

浮动特点：

浮动只有水平移动在父盒子区域内部进行左右移动

float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界
浮动元素脱离标准流，不占据界面位置—》形成浮动流
浮动破坏标准流但是不影响文本流
浮动元素遇到浮动元素立即停止浮动（并排）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTfthj8O-1605867640027)(media/浮动的影响.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgXU2Aon-1605867640030)(media/浮动影响02.png)]

浮动—》想要并排—》但是浮动子元素形成浮动流，不占据位置导致—》父盒子高度变为height:0 (高度塌陷)

本质原因：浮动元素不参与高度计算

清除浮动带来的影响

给父盒子定高度

缺点：不实际实际问题就是有时候父盒子高度不确定 auto
给父盒子加overflow:hidden属性

overflow:hidden—》触发BFC规则：有一条如果这个盒子是BFC盒子那么这个盒子里的浮动子元素也会参与高度计算

缺点：overflow:hidden1.溢出隐藏。切掉 2. 触发形成BFC盒子

会把我们故意想要溢出的盒子切掉
专门用于清除浮动影响的属性
```
clear:both/left/right;

只有块类型的元素才能清除浮动带来的影响
<div style=" clear:both;"></div>
```
这个属性放在父盒子里加在最后一个浮动子元素的后面作为父盒子的内容存在

缺点：结构冗杂（真的标签没有展示有效数据，空元素）
最终方案双伪元素清浮动法

清楚浮动影响的类哪个父盒子的子元素浮动了那么就给这个父盒子加这个类

 .clearfix::after {
            content: '';
            /* 清除浮动影响的必须是块类型 */
            display: block;
            clear: both;

        }
 .clearfix::before{
            content: '';
            /* 清除浮动影响的必须是块类型 */
            display: block;
            clear: both;

        }

伪元素单双冒号都对只不过高版本浏览器两个都支持低版本浏览器不支持:: ie8及其以下不支持::

伪元素

真元素真标签真的写到body真的是一个<>

伪元素：用css创造出来的元素

伪元素创造出来以后默认是行内类型

前伪元素

E:before {
    content:'';//写这个元素的文本
    
}
作用：创造一个元素插入到E元素的所有内容之前（创造的元素是E的第一个子元素）

后伪元素

E:after {
     content:'';//写这个元素的文本
    
}
作用：创造一个元素插入到E元素的所有内容之后（创造的元素是E的最后一个子元素）

浮动对于元素类型的影响

行内 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

行内块 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

块元素 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

 i {
            display:block;//这句代码就非常没有必要了，对吗？？？
            width: 20px;
            height: 20px;
            background-color: #ccc;
            float: left;
            margin-left: 10px;
        }


    </style>
</head>
<body>

    <i></i>
    <i></i>
    <i></i>
    <i></i>

最初解决的问题—图文环绕（了解）

myDay05

复习

面试题：img插入图片和背景属性插入图片的区别？(可以再回顾一下视频，最后的结构树和样式树渲染)

background:url()

img加载顺序优先于背景属性一般大的广告图都会用背景属性与数据相关的小图会用img

6个选择器

后代 E F{}

子代E>F{}

兄弟E~F{}

相邻选择器 E+F{}

交集选择器 FC{}

并集选择器 E，F，C…{}

优先级：权重

行内样式1000 >id选择器100>class10>tagName1>*0>继承属性，浏览器分配的默认样式

继承：text-（text-decoration不能继承）,line-,font-,list-.color(inherit)

父亲有font-size:12px 子元素>子>子…(减少代码的冗余)

<div class="a" id="box"></div>
PC端
#box{
	padding:10px;
}
移动端(执行代码优先级高，会被覆盖，所以需要选择器加优先级权重)：
父元素 #box .g .f{
	padding:0px;
}

1.浮动

布局第二大块盒模型行内块

行内块并排缺点：（不推荐做并排，用浮动更推荐一些）

1.中间有间距（font-size:0px，解决起来有些麻烦）

2.文本内容行数多少不一样的时候会出现对不齐现象（overflow:hidden，解决起来有些麻烦）

2.浮动属性

作用：专业解决并排

float:left左侧浮动/right右侧浮动/none不浮动;
float:none;默认值 标准状态 标准流：浏览器解析块元素从上到下一行一个 垂直排列
行内元素并排中间有间距。

特点：

1.浮动只有水平移动在父盒子区域进行左右移动

float:left 靠近父盒子左侧边界 right 靠近父盒子右边边界

2.浮动元素脱离标准流，不占据界面位置–形成浮动流

3.浮动破坏标准流但是不影响文本流。（区域上去，文字不上去，float的浮动气流是单向性的，向下传递）

4.浮动元素遇到浮动元素立即停止浮动。（并排）（视频再看一下）

5.浮动-并排-不占据界面位置，形成浮动流，父盒子高度变为0（父盒子高度塌陷）

本质原因：在标准情况下，浮动元素不参与高度计算

3.解决父盒子塌陷

1.给父盒子定高度

缺点：不实际实际问题就是父子高度不确定 auto

2.给父盒子加overflow:hidden属性

overflow:hidden–触发BFC规则：有一条如果这个盒子是BFC盒子那么这个盒子里的浮动子元素也会参与高度计算。

缺点：overflow:hidden；1.溢出隐藏，切掉。 2.触发形成BFC盒子。

会把我们故意想要溢出的盒子切掉

3.专门用于清除浮动影响的属性

clear:both/left/right
<div style="clear:both;"></div>

只有块类型的元素才能清除浮动带来的影响。行内和行内块不可以清除浮动。

这个属性放在父盒子里加在最后一个浮动子元素的后面作为父盒子的内容存在

缺点：结构冗杂（真的标签没有展示有效数据，空元素，也会加载，加载会变慢）

4.最终双伪元素清浮动法(真正起到效果的是后伪元素法)

清除浮动影响的类哪个父盒子的子元素浮动了那么就给这个父盒子加这个类

.clearfix:after{
	content:"";
	//转成块类型,清除浮动影响的必须是块类型
	display:inline-block;
	clear:both;
}

.clearfix:before{
	content:"";
	//转成块类型,清除浮动影响的必须是块类型
	display:inline-block;
	clear:both;
}

伪元素单双冒号都对，只不过高版本浏览器两个都支持，低版本浏览器不支持双冒号：ie8及其以下不支持双冒号。

4.伪元素

真元素真标签真的写到body真的是一个<>。

伪元素：用css创造出来的元素。

伪元素创造出来以后默认是行内类型

前伪元素

E:before{
content:"";//content里面写的是这个元素的文本
}
作用：创造一个元素插入到E元素的所有内容之前（创造的元素是E的第一个子元素）

后伪元素

E:after{
content:"";//content里面写的是这个元素的文本
}
作用：创造一个元素插入到E元素的所有内容之后（创造的元素是E的最后一个子元素）

hover:

.box:hover:before{

}

：hover ：active是不能直接选择伪元素的但是你可以通过父盒子挑选伪元素

天猫小盒子视频复习一下

calc(a - b)操作符两边加空格（可以实现±*/ 百分比和像素的加减乘除）

5.浮动对于元素类型的影响

1.如果是行内元素 +float:left/right—不区分元素类型，全部都是密闭私有的独立的区域（BFC盒子），不具有文本属性了就。

2.img(行内块) +float:left/right—不区分元素类型，全部都是密闭私有的独立的区域（BFC盒子），不具有文本属性了就。

3.块元素（不加边框的时候不是非常密闭） +float:left/right—不区分元素类型，全部都是密闭私有的独立的区域（BFC盒子），不具有文本属性了就。

注意：加了浮动就不用了转display的行内块了（转元素类型），因为没有意义了，其本身就可以设置属性。

HTML5+CSS3快速入门浮动，高度塌陷，伪元素清除浮动每日一篇day05

teacherDay05

浮动属性

清除浮动带来的影响

伪元素

前伪元素

后伪元素

浮动对于元素类型的影响

最初解决的问题—图文环绕（了解）

myDay05

1.浮动

2.浮动属性

3.解决父盒子塌陷

4.伪元素

前伪元素

后伪元素

5.浮动对于元素类型的影响

6.浮动本来是解决最初解决的问题–图文环绕