HTML学习的第五天-CSDN博客

本文链接：https://blog.csdn.net/xhzm_love/article/details/109907473

冲！

day05

行内块并排的缺点：

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

浮动属性

作用：专业解决并排

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Plgrc7vl-1605962156608)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605961379223.png)]

特点：

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

float:left 靠近父盒子左侧边界 right靠近父盒子右侧边界
浮动元素脱离标准流的状态，不占据界面位置（浮在桥上）–》形成浮动流（单向传递，向下影响）
浮动破坏标准流但不影响文本流（渲染区域改变，文字不受影响，还在原来的位置）
浮动元素遇见浮动元素立即停止浮动（并排）

浮动–》并排–》不占据界面位置，形成浮动流，不占据位置–导致–》父盒子高度变为height：0（高度塌陷）

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

解决父盒子高度塌陷

父盒子不设置高度时，会出现塌陷问题

解决方法

给父盒子设置高度

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

overflow：hidden–》触发BFC规则（块级格式化上下文）规则有一个：如果这个盒子是BFC盒子，那么这个盒子里的浮动子元素也会参与高度计算（缺点：overflow：hidden；有两个意思：溢出隐藏（会把故意溢出的盒子隐藏）和触发形成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的最后一个子元素）

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

浮动对于元素类型的影响

行内元素加了浮动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>