HTML前端基础知识之悬浮

最新推荐文章于 2025-04-21 16:43:06 发布

原创最新推荐文章于 2025-04-21 16:43:06 发布 · 845 阅读

CC 4.0 BY-SA版权

文章标签：

文章探讨了CSS中的float属性，包括左浮动和右浮动对布局的影响，如脱离标准文档流可能导致的错乱。提到了解决浮动后父级盒子塌陷的方法，如使用overflow:hidden，添加clear:both的空盒子，以及利用伪类::after。这些技术用于控制元素布局和防止内容溢出。

左悬浮

float: left;

右悬浮

 float: right;

注意悬浮会

/* 1. 脱离标准文档流

影响：破坏了布局，导致布局错乱

2.不脱离文本流

/* 规范：

同级之间，加float属性，其余的也要加

溢出隐藏

overflow: hidden;

/* 浮动导致父级盒子塌陷

解决办法：

1. 父级盒子加高（不能自动撑开，高是固定的，不够灵活）

ul{ 
    height: 102px;   
 }

2. 父级盒子加 overflow: hidden; （自动撑开，但会导致溢出的部分无法显示）

ul{
overflow: hidden;
}

3. 加一个无内容的空盒子：clear: both;（必须无意义无宽高）

div{
        clear: both;
     }

4. 父盒子加伪类属性 ::after { content: '';display:block; clear:both}(达到添加无意义空盒子的效果且不受影响)

.clear::after{
            content: '';
            display: block;
            clear: both;

        }