08浮动和清浮动

小狗爱吃土豆儿~

已于 2023-07-16 17:52:47 修改

阅读量40

点赞数 1

文章标签：前端 html css

于 2023-07-12 21:53:02 首次发布

本文链接：https://blog.csdn.net/weixin_53971197/article/details/131683631

版权

文章详细阐述了CSS中浮动元素的概念，包括浮动如何使元素超出文档流并实现横向布局，以及浮动对父元素高度的影响。同时，介绍了清除浮动的方法，如使用overflow:hidden,设置固定高度，display:inline-block，以及利用伪元素和空标签等技巧来避免布局混乱。

摘要由CSDN通过智能技术生成

浮动和清浮动

浮动

常用float: left;

浮动的原理：

设置浮动的元素超出文档流
文档流：

就是元素从上到下，从左到右的布局顺序
浮动的作用：

从整体出发，把标签元素进行横向布局
使用inline-block 横向布局的弊端：
1. 元素之间有缝隙，需要解决
2. 低版本浏览器不支持 inline-block
浮动的特点：
1. 浮动元素超出文档流
2. 块属性标签浮动之后，不再独自占据一行空间，如果不设置宽高，则他的宽高由内容撑开
3. 块属性标签浮动之后，他的margin属性的auto值失效
4. 行属性标签浮动之后，可以设置宽和高，并且支持上下padding和上下margin

清浮动

当子级元素进行浮动的时候，他的父元素被因此产生影响，由于浮动元素脱离文档流，父元素没有被子元素撑开，导致父元素没有高度，这样在布局的时候会产生混乱

清除浮动产生的影响(清浮动)

方法：

给浮动元素的父级，添加 overflow:hidden;
给父元素设置指定高度，确保布局正确
给父元素添加 display：inline-block;，该方法兼容性差
给父元素添加浮动,可能会影响布局

设置一个空标签，在空标签中设置属性

.clear{
     clear:both;

/* 防止ie低版本具有默认高度 */
    height:0px;
    overflow:hidden;    
}

空标签必须放在所有浮动元素的后面

通过after伪元素清浮动

.clearfix::after{
        content: '';
        visibility: hidden;
        display: block;
        height: 0;
        overflow: hidden;
        clear: both;
        }