清除浮动的几种方案

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

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

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

第二种:给父元素设置 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;
        }
相关文章
二次元风格地址发布页源码
二次元风格地址发布页源码
624 2
二次元风格地址发布页源码
|
9月前
|
缓存 网络协议 Java
JAVA网络IO之NIO/BIO
本文介绍了Java网络编程的基础与历史演进,重点阐述了IO和Socket的概念。Java的IO分为设备和接口两部分,通过流、字节、字符等方式实现与外部的交互。
292 0
|
设计模式 缓存 Java
面试题:谈谈Spring用到了哪些设计模式?
面试题:谈谈Spring用到了哪些设计模式?
168 2
|
编解码 前端开发 JavaScript
ThreeJs制作模型图片
这篇文章介绍了如何使用Three.js将一张图片转化为3D场景中的像素化模型,通过提取图片的像素颜色并将它们应用到3D立方体上,形成一种特殊的图像展示效果。
249 0
ThreeJs制作模型图片
详尽分享马卡龙色色卡及其十六进制代码
详尽分享马卡龙色色卡及其十六进制代码
705 0
|
监控 机器人 API
利用itchat搭建微信机器人详解(附三个实用示例)(中)
2011年1月21日,微信推出第一个正式版本,到现在已有7个年头。从一开始的不被看到好,到现在的用户量超10亿,大众的日常生活越来越离不开微信。人生苦短我用Python,有没有办法通过Python来对我们使用微信提供一些便利呢? 答案肯定是有的,在Github上有一个基于微信网页版接口微信开源库:itchat,通过几十行的代码就能轻松实现一个微信机器人。本章我们就来了解学习这个库,然后通过三个实用案例来帮大家玩转这个库。
1570 0
|
存储 Java 开发工具
轻松搭建分布式对象存储:Spring Boot整合MinIO的快速指南
轻松搭建分布式对象存储:Spring Boot整合MinIO的快速指南
1235 0
轻松搭建分布式对象存储:Spring Boot整合MinIO的快速指南
|
JSON Go 数据格式
Golang 语言怎么高效读写 JSON 字符串?
Golang 语言怎么高效读写 JSON 字符串?
208 0
|
SQL 搜索推荐 关系型数据库
Windows 系统彻底卸载 SQL Server 通用方法
Windows 系统彻底卸载 SQL Server 通用方法
1511 0
Windows 系统彻底卸载 SQL Server 通用方法
|
前端开发 JavaScript 小程序
新来个技术总监,给公司项目引入了全新的业务架构,堪称最佳实践!
新来个技术总监,给公司项目引入了全新的业务架构,堪称最佳实践!
下一篇
oss云网关配置