解决高度塌陷问题

所谓高度塌陷就是在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。

例如:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{/*为box1设置一个边框*/border: 10px red solid;}.box2{width: 100px;height: 100px;background-color: blue;/*为子元素设置向左浮动*/float: left;}.box3{height: 100px;background-color: yellow;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body>
</html>

 

解决高度塌陷问题

方法一:  

根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

当开启元素的BFC以后,元素将会具有如下的特性:

  1.父元素的垂直外边距不会和子元素重叠

  2.开启BFC的元素不会被浮动元素所覆盖

  3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC:

  1.设置元素浮动

  —使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下边的元素上移,不能解决问题

  2.设置元素绝对定位

  3.设置元素为inline-block

  - 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式

  4.将元素的overflow设置为一个非visible的值

推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。

注意:但是在IE6及以下的浏览器中并不支持BFC,所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC,但是具有另一个隐含的属性叫做hasLayout,该属性的作用和BFC类似,所在IE6浏览器可以通过开hasLayout来解决该问题,开启方式很多,我们直接使用一种副作用最小的:直接将元素的zoom设置为1即可

  1.zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍

  2.zoom:1表示不放大元素,但是通过该样式可以开启hasLayout

  3.zoom这个样式,只在IE中支持,其他浏览器都不支持

例如:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{border: 10px red solid;zoom:1;overflow: hidden;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;background-color: yellow;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body>
</html>

方法二:

可以直接在高度塌陷的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用。使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。

例如:

  <!DOCTYPE html><html>  
 <head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.clear{clear: both;}</style></head><body><div class="box1"><div class="box2"></div><div class="clear"></div>
</div></body> </html>

方法三:

可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用,在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理

例如:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.clearfix:after{/*添加一个内容*/content: "";/*转换为一个块元素*/display: block;/*清除两侧的浮动*/clear: both;}.clearfix{zoom:1;}</style></head><body><div class="box1"><div class="box2"></div>
       
<div class="clearfix"></div>
        </div></body>
</html>

 

 

 

 

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

 

    


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

HDU2035 - 人见人爱A^B

求A^B的最后三位数表示的整数。 说明&#xff1a;A^B的含义是“A的B次方” Input 输入数据包含多个测试实例&#xff0c;每个实例占一行&#xff0c;由两个正整数A和B组成&#xff08;1<A,B<10000&#xff09;&#xff0c;如果A0, B0&#xff0c;则表示输入数据的结束&…

Cisco TrustSec(理解)

1、Cisco TrustSec的限制当指定了无效的设备ID时&#xff0c;受保护的访问凭据&#xff08;Protected access credential&#xff0c;PAC&#xff09;设置将失败并保持挂起状态。 即使在清除PAC并配置正确的设备ID和密码后&#xff0c;PAC仍然会失败。作为解决方法&#xff0c;…

Java 8仍然需要LINQ吗? 还是比LINQ更好?

长期以来&#xff0c; LINQ是.NET软件工程生态系统中发生的最好的事情之一。 通过在Visual Studio 2008中引入lambda表达式和monads &#xff0c;它使C&#xff03;语言比Java&#xff08;当时的版本6&#xff09;更先进&#xff0c;并且仍在讨论泛型类型擦除的优缺点。 这项成…

web前端(12)—— 页面布局2

本篇博文&#xff0c;主要就讲定位的问题&#xff0c;也就是页面布局里最重要的&#xff0c;本篇博文不出意外的话&#xff0c;也是css的最后一篇博文了 定位&#xff0c;position属性 定位有三种&#xff1a; 相对定位绝对定位固定定位 相对定位&#xff0c;position&#x…

51Nod.1766.树上最远点对(树的直径 RMQ 线段树/ST表)

题目链接 \(Description\) 给定一棵树。每次询问给定\(a\sim b,c\sim d\)两个下标区间&#xff0c;从这两个区间中各取一个点&#xff0c;使得这两个点距离最远。输出最远距离。\(n,q\leq10^5\)。 \(Solution\) 一个集合直径的两端点&#xff0c;在被划分为两个集合后一定是两个…

Web应用程序中的Spring JDBC入门

在上一篇文章中&#xff0c;我已经向您展示了如何设置基本的Spring 3 MVC Web应用程序 。 重复使用该项目设置作为模板&#xff0c;我将向您展示如何增强它以与JDBC一起使用。 有了它&#xff0c;您可以存储和检索数据库中的数据。 我们将通过Spring添加一个新的控制器和一个数…

python pyplot中axis_Python Pyplot xaxis未显示在图形上

pyplot未在图形上显示x轴&#xff1a;import pandas as pdimport matplotlib.pyplot as pltdf pd.read_csv(sitka_weather_2014.csv)df[AKST] pd.to_datetime(df.AKST)df[Dates] df[AKST].dt.strftime(%b %d, %Y)df.set_index("Dates", inplace True)# Plot Dataf…

为什么dubbo的调用重试不建议设置成超过1

前面提到过&#xff0c;重试是靠ClusterInvoker来保证的&#xff0c;不同的Cluster在调用失败的时候 做不同处理 比如默认的FailoverClusterInvoke的doInvoke方法里面&#xff1a;int len getUrl().getMethodParameter(invocation.getMethodName(), Constants.RETRIES_KEY, Co…

web前端入门学习(纯干货)

web前端怎么样才能入门&#xff0c;首先我们要从什么是初级web前端工程师说起&#xff1a; 按照我的想法&#xff0c;我把前端工程师分为了入门、初级、中级、高级这四个级别&#xff0c; 入门级别指的是了解什么是前端&#xff08;前端到底是什么其实很多人还是不清楚的&…

用BlockingExecutor限制任务提交

JDK的java.util.concurrent.ThreadPoolExecutor允许您将任务提交到线程池&#xff0c;并使用BlockingQueue来保存提交的任务。 如果您要提交数千个任务&#xff0c;请指定一个“绑定”队列&#xff08;即最大容量的队列&#xff09;&#xff0c;否则JVM可能会耗尽内存。 您可以…

[校内模拟题2]

水题 但是原地螺旋炸裂 都不好意思贴代码了QWQ enc 【问题背景】 zhx 和他的妹子聊天。 【问题描述】 考虑一种简单的加密算法。假定所有句子都由小写英文字母构成&#xff0c; 对于每一个字母&#xff0c; 我们将它唯一地映射到另一个字母。 例如考虑映射规则&#xff1a;a-&g…

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一、什么是JSON 1.介绍JSON独立于语言&#xff0c;是一种与语言无关的数据格式。JSON指的是JavaScript对象表示法&#xff08;JavaScript Object Notation&#xff09;JSON是轻量级的文本数据交换格式JSON具有自我描述性&#xff0c;更易理解JSON使用JavaScript语法来描述数据对…

python保存为xlsb_Read XLSB File in Pandas Python

问题There are many questions on this, but there has been no simple answer on how to read an xlsb file into pandas. Is there an easy way to do this?回答1:Hi actually there is a way. Just use pyxlsb library.import pandas as pdfrom pyxlsb import open_workboo…

内存不足而没有OutOfMemoryError

这实际上是最初发布于2010年的帖子的转世。 昨天&#xff0c;当听到我们的工程师咒骂一个特别令人讨厌的错误时&#xff0c;闪回发生了。 当诅咒停止时&#xff0c;我走过去核实我的怀疑。 瞧&#xff0c;我是正确的–情绪波动是由应用程序用尽了堆空间导致的&#xff0c;但死于…

人工智能第二星期总结-------纵里寻它千百度

2018-07-28 第二周&#xff1a; 此时此刻我怀着无比沉重的心情在这里做一周的学习检讨工作 这星期依此就开始讲到了函数&#xff0c;话说函数可是python里面的钟头戏&#xff0c;不仅可以节约代码&#xff0c;还可以把代码重复使用&#xff0c;只要后面轻轻松松就可以搞定啦&am…

个人作业——软件产品案例分析

个人作业——软件产品案例分析 第一部分 调研&#xff0c;评测 评测&#xff1a; 第一次上手体验 第一眼看上去功能很全面&#xff0c;但是到点开来发现功能大部分没有实现&#xff0c;体验不太好。 缺陷Bug情况 课表查询 bug描述&#xff1a;课表查询没有课表结果,点进去当前周…

java hashtable put_Java Hashtable put()方法与示例

哈希表类put()方法put()方法在java.util包中可用。put()方法用于将给定的键元素(key_ele)放入给定的值元素(val_ele)。put()方法是一个非静态方法&#xff0c;只能通过类对象访问&#xff0c;如果尝试使用类名访问该方法&#xff0c;则会收到错误消息。put()方法在放置键/值对时…

HTML之表单

表单&#xff1a; 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如&#xff1a;文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> . input 元素 . </form>…

将AspectJ与NetBeans平台开发集成

您是否正在使用NetBeans平台开发项目&#xff1f; 您愿意使用AspectJ来使用AOP吗&#xff1f; 您不知道如何将AspectJ编译器集成到NetBeans的内部版本中&#xff1f; 如果您的回答是“是”&#xff0c;则此帖子适合您。 我决定写这篇技术文章&#xff0c;是因为我在寻找该解决…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明&#xff0c;默认jdk指我们安装完CentOS后系统自带jdk&#xff0c;自己下载安装的jdk只需要下载&#xff0c;解压即可&#xff0c;之后步骤与此文一致 1.查看我们默认…