谈谈常用清除浮动的方法

我们在做页面布局的时候,经常需要利用浮动来实现一些布局效果,这样带来的后果就会导致父元素丢失宽度。今天我们就来说说‘找回‘宽度的方法。

而清除浮动后的效果应该是这样的请看:

下面就说说方法,方法其实有非常的多,下面部分方法的截图请大家参考

(1)父级div定义height。
(2)结尾处加空div标签clear:both。
(3)父级div定义伪类:after和zoom。
(4)父级div定义overflow:hidden。
(5)父级div定义overflow:auto。
(6)父级div也浮动,需要定义宽度。
(7)父级div定义display:table。
(8)结尾处加br标签clear:both

一般来说 给父元素加伪元素after是更好的方法。附图一张:

(新手请多多指教)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS API For JS之网络分析(临近设施分析)

ArcGIS 提供两种网络分析,即基于Geometric Network的有向网络或者设施网络和基于Network Dataset的无向网络,在这里网络的分析指后者,ArcGIS api支持网络分析中的最短路径分析、服务区分析、临近设施分析。本文主要讲的是临近设施分析&#x…

UWP DEP0700: 应用程序注册失败。[0x80073CF9] 另一个用户已安装此应用的未打包版本。当前用户无法将该版本替换为打包版本。...

最近电脑抽风,我在【应用程序和功能】中重置了以下我的App自然灾害,居然,搞出大新闻了。 它居然从列表中消失了。。。 vs再次编译代码的时候,提示 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 DEP…

泽西岛的RESTful Web服务

我已经讨论了有关体系结构注意事项<< link >>的早期文章&#xff0c;以成为可在我的系统/机器上使用的分布式环境上的RESTful系统。 本文我们将讨论如何基于REST体系结构考虑来构建Web服务。 本教程说明了如何使用Tomcat 6&#xff0c;Eclipse和Jersey JAX-RS&…

css水平垂直居中(绝对定位居中)

使用绝对定位有个限制就是父集必须设置一个固定的高度。 首先HTML 1 <div id"box"> 2 <div class"child"></div> 3 </div> CSS 1 #box {2 position: relative;3 height: 500px;4 background: red;5 }6 .chil…

洛谷 2719 搞笑世界杯

洛谷 2719 搞笑世界杯 洛谷原题链接 这道难度只有普及-的题目却花了我一个多小时才搞出来。但做出来之后就会发现&#xff1a;其实这题确实挺水。。。 解题思路&#xff1a; 首先开二维数组 dp [ i ] [ j ] . 代表已售 i 张 A , j 张 B 时后两人买到的票相同的概率。 很显然&am…

搭建SSH框架–使用篇

创建如下包&#xff1a; action用于响应请求 service则是提供请求的操作 dao用于操作数据库 entity用于映射数据库表 打开DB Browser –> personalCD&#xff08;创建篇的数据库连接&#xff09;–> SCOTT –> TABLE –> t_USER –> 右键Hibernate Reverse……

3个简单步骤即可测试Java 8

即将发布的Java 8版本为Java开发人员带来了许多新功能&#xff0c;但是升级时始终存在代码破裂的风险。 我们都记得Java 7发行时有一系列非常严重的错误 。 当然&#xff0c;我们所有人都可以帮助避免在Java 8中出现相同的问题。我今天要介绍的方法是使用现有的Continuous Int…

父类div高度适应子类div

父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度&#xff0c;所以需要父类div要适应子类div的高度&#xff0c;一般情况父类的高度可以直接设置成“auto”即可。 在有的情况下&#xff0c;子类div会撑破父类div. 所以需要走一些调整。通常有3种方法对…

jenkins jar包上传maven仓库

1 Jenkins 编译后部署至 Maven 仓库jenkins编译后构件&#xff08;如&#xff1a;jar包&#xff09;部署至maven仓库需修改以下内容&#xff1a;maven 仓库配置&#xff1b;项目 pom 文件&#xff1b;本地仓库的 settings.xml 内容&#xff1b;jenkins goals 修改1&#x…

Java文件合并变得语义化

与任何程序员交谈&#xff0c;并询问他应该如何进行合并&#xff1a;“它应该理解代码&#xff0c;对其进行解析&#xff0c;然后根据结构进行合并” –他很可能会说。 而这恰恰是SemanticMerge for Java所做的&#xff1a;它解析要合并的文件&#xff08;加上祖先或“文件在更…

KnockoutJS-快速入门

虽然在WPF中接触过MVVM模式&#xff0c;可是刚开始在Web中接触到Knockout.JS让我大吃一惊&#xff0c;简化了好多工作量&#xff0c;原来可能需要一大堆的JS脚本完成的工作量&#xff0c;被释放许多。接触KnockoutJS一年多了&#xff0c;在好多个项目中也用到过&#xff0c;虽然…

如何在一个页面添加多个不同的kindeditor编辑器

kindeditor官方下载地址&#xff1a;http://kindeditor.net/down.php &#xff08;入门必看&#xff09;kindeditor官方文档&#xff1a;http://kindeditor.net/doc.php &#xff08;入门必看&#xff09;Kindeditor编辑器初始化参数文档&#xff1a;http://kindeditor.net/doc…

JSONArray.fromObject不执行且不报错问题的解决

今天在写javaweb工程的时候需要向前台传json格式的数据&#xff0c;用到了json-lib-2.4-jdk15.jar等一系列包&#xff0c;然而却出现如下状况&#xff1a; CityBean是一个javaBean&#xff0c;我们看到&#xff0c;控制台只打印出了list的内容&#xff0c;而下面的两个却没能打…

爬虫-scrapy

阅读目录 一 介绍二 安装三 命令行工具四 项目结构以及爬虫应用简介 五 Spiders六 Selectors七 Items八 Item Pipeline九 Dowloader Middeware十 Spider Middleware十一 settings.py十二 爬取亚马逊商品信息一 介绍 Scrapy一个开源和协作的框架&#xff0c;其最初是为了页面抓取…

Java垃圾回收(4)

G1&#xff1a;垃圾优先 G1收集器是热点JVM中要实现的最新收集器。 自Java 7 Update 4以来&#xff0c;它一直是受支持的收集器。OracleGC团队也公开表示&#xff0c;他们对低暂停GC的希望是完全实现的G1。 这篇文章来自我之前的垃圾收集博客文章&#xff1a; 热点GC概述 。 …

Html5 冒泡排序演示

本文通过一个简单的小例子&#xff0c;简述冒泡算法在B/S中的简单使用&#xff0c;仅供学习分享使用&#xff0c;如有不足之处&#xff0c;还请指正。 概述 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff0c;是一种计算机科学领域的较简单的排序算法。 它重复地走访…

一种编写测试的好方法

测试。 最近我一直在考虑进行测试。 作为我对各种项目所做的代码审查的一部分&#xff0c;我已经看到了数千行未经测试的代码。 这不仅是测试覆盖率统计数据指出这一点的情况&#xff0c;还更多是该项目中根本没有任何测试的情况 。 我一直听到这种悲惨状况的两个原因&#xff…

rem、px、em之间的区别以及网页响应式设计写法

个人收藏用&#xff0c;转载自&#xff1a;http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小&#xff0c;至今天为止都还在激烈的争论着&#xff0c;有人说PX做为单位好&#xff0c;有人说EM优点多&#xff0c;还有人在说…

游戏服务器架构图

1&#xff1a;ARPG类型游戏 2:MMORPG 3:MOBA 4:卡牌类 5&#xff1a;棋盘类 转载于:https://www.cnblogs.com/like-minded/p/8297718.html

GlassFish 4带来了Java EE 7

真是惊喜 除了推出新的iOS 7外&#xff0c;苹果在wwdc上什么也没提供。 碰巧的是&#xff0c;在他们的主题演讲后不久&#xff0c;又有7个人正式露面。 GlassFish 4.0已于昨天晚上发布&#xff08;显然是不需要的&#xff09;。 新的Java EE 7参考实现自动成为当今第一个可用的…