清除浮动的多种方法

简介:

1:给父类添加浮动   /* 浮动元素太多时有局限性 */

2:给父类添加display:inline-block   /* 会把元素直接的空格间隙也会应用上去 */

3:在浮动元素后面添加一个空元素,并设置清除浮动 clear:both;

4:在浮动元素后面<br clear:"all"> /* 不符合W3C标准 */

5:浮动元素的父类添加   /* 推荐这种方法 */

.box-set:before,

.box-set:after {

  content: "";

  display: table;

}

.box-set:after {

  clear: both;

}

.box-set {

  *zoom: 1;

/* 兼容IE6*/

}

6:父类添加overflow  

/* IE6下无效必须添加 zoom:1 */

/* IE6下浮动元素父类有宽度的话就不用清除浮动*/



本文转自    风雨萧条 博客,原文链接: http://blog.51cto.com/1095221645/1889975       如需转载请自行联系原作者

相关文章
|
存储 容器
科普:如果电容器阻断直流电,为什么还要在直流电路中使用电容器?
如果电容器阻止直流,那么为什么它用于直流电路?问题不应该是为什么,而是如何!电容器在直流电路中有许多应用,如旁路、滤波、耦合和去耦。因此,利用这种阻隔直流和通过交流的特性,电容器可用于不同的应用。这取决于它连接到电路的方式、电容值、信号频率、电压和其他几个因素。
1983 0
科普:如果电容器阻断直流电,为什么还要在直流电路中使用电容器?
|
域名解析 存储 缓存
域名服务器 (DNS):工作原理及其优势
【8月更文挑战第19天】
1542 0
|
10月前
|
机器学习/深度学习 编解码 异构计算
4090笔记本0.37秒直出大片!英伟达联手MIT清华祭出Sana架构,速度秒杀FLUX
英伟达、麻省理工学院与清华大学联合发布Sana,一款高效文本到图像生成框架。Sana通过深度压缩自编码器和线性注意力机制,实现快速高分辨率图像生成,生成1024×1024图像仅需不到1秒。此外,Sana采用解码器专用文本编码器增强文本与图像对齐度,大幅提高生成质量和效率。相比现有模型,Sana体积更小、速度更快,适用于多种设备。
195 7
|
机器学习/深度学习 人工智能 自然语言处理
基于ChatGPT快速入门体验NLP词云
基于ChatGPT快速入门体验NLP词云
351 0
|
安全 数据可视化 BI
Power BI的基本操作(一)
Power BI的基本操作
1977 0
Power BI的基本操作(一)
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
733 0
教你用HTML+CSS实现百叶窗动画效果
|
前端开发 数据库
转发和重定向的区别及使用方法(全)
目录前言1. 定义1.1 转发1.2 重定向2. springmvc实战代码3. 总结异同 前言 页面跳转的主要两种实现方式: 转发 重定向 1. 定义 1.1 转发 在客户端中发送请求到服务端,在服务端中有所匹配的servlet即可,之后servlet执行其操作,之后调用getRequestDispacther()方法,把请求转发给指定的前端页面,整个流程都是在服务端中执行(同一个请求)。在转发过程中,可以把数据保存到request域对象中(因为转发使用同一个request域) request.get
572 0
|
弹性计算 运维 Cloud Native
无影云应用核心技术解读
本文整理自阿里云无影高级技术专家付志超,在阿里云EMR StarRocks无影云应用线上发布会的分享。
无影云应用核心技术解读
|
缓存 数据可视化 Shell
ROS入门笔记(七):详解ROS文件系统(上)
ROS入门笔记(七):详解ROS文件系统
848 0
ROS入门笔记(七):详解ROS文件系统(上)