2022.7.5前端学习日记

*Hana*

已于 2022-07-05 19:41:32 修改

阅读量174

点赞数

文章标签：大数据

于 2022-07-05 19:39:33 首次发布

本文链接：https://blog.csdn.net/m0_52837179/article/details/125617052

版权

浮动作用：使块级标签完美地在一行排列，网页布局。早期浮动的作用是图文环绕

float:right/left

浮动特点：1.浮动元素会脱离标准流（脱标），在标准流不占位置相当于从地面飘到了空中

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动的标签是顶对齐的，设置外边距可以上下进行移动

5.浮动具有行内块的特点，但是比行内块标签高级

清除浮动：影响：如果子元素浮动了，此时子元素不能撑开标准流的父级元素

原因：子元素浮动后脱标--不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

方法1：额外标签 A.在父元素最后添加一个块级元素

B.给添加的块级元素设置clear:both

缺点：会在页面中添加额外的标签，会让页面HTML结构变得复杂

方法2：单伪元素替代法用伪元素代替了额外标签

优点：项目中使用，直接给标签加类即可清除浮动

.clearfix::after{
                clear:both;
                content: '';
                /* 因为伪元素添加的是行内的 */
                display: block;
            }

方法3：双伪元素替代法

<!-- .clearfix::before,
        .clearfix::after{
            /* clear:both; */
            content: '';
            /* 因为伪元素添加的是行内的 */
            display: table;
        }
        .clearfix::after{
            clear: both;
        } -->

方法4：给父元素设置overflow:hidden

注意点：1.浏览器解析行内块或者行内标签的时候如果两个标签的代码换行就会产生一个空白间隔。