清除浮动的几种方案

简介: 清除浮动的几种方案

浮动会导致元素脱离文档流,内容没有父盒子进行撑开,后面的内容顶上去,有以下几种方案

第一种:给父盒子设置宽高

第二种:给父元素设置 overflow:auto;

第三种:给父元素设置 overflow:hidden;本意是将超出父类的部分隐藏

但是给浮动加了之后子盒子会撑开父盒子偏方

第四种:clear:both清除

clear:both
//写过这个之后会出现magin无效的情况
//可以在加上此属性的类名上在添加一个类名添加高即可解决

第五种单伪元素清除

:after{
content:“ ”;
clear:“both”;
display:block;
height:0;
//overflow:hidden; 这俩可以单独拉出来使用也可加可不加
//visibility:hidden; 隐藏后仍占据空间
}

第六种:双伪元素清除浮动,推荐

clear:after, .clear:before{
            content: "";
            display:block;
            clear: both;
            height: 0;
            font-size: 0;
            visibility: hidden;
            overflow: hidden;
        }
相关文章
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
89 0
|
20天前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
3月前
|
容器
探索浮动布局的原理与实践
探索浮动布局的原理与实践
|
前端开发
清除浮动的几种方式?各自的优缺点?
清除浮动的几种方式?各自的优缺点?
57 0
水平垂直居中的四种方式
水平垂直居中的四种方式
|
前端开发 容器
【清除浮动的 5 种方法】
【清除浮动的 5 种方法】
|
前端开发
CSS高度塌陷问题及清除浮动的三种方式
在父元素最后增加一个空的块级子元素,并且让它设置clear: both
161 0
|
前端开发 JavaScript
了解BFC特性,轻松实现自适应布局
BFC(Block Formatting Context)俗称块级格式上下文,初次看到这词似乎有点不是很理解,通俗解释就是一个独立区域决定了内部元素的排放,以及内部元素与外部元素的相互作用关系
148 0
了解BFC特性,轻松实现自适应布局
|
前端开发
CSS的三种布局机制 浮动 清除浮动
CSS的三种布局机制 浮动 清除浮动
180 0
CSS的三种布局机制 浮动 清除浮动