html自适应_web前端入门到实战:HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法...

9c03a1690d4ffd9fe4415f3197dbdbd5.png

元素浮动定义

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。


why 子元素浮动 会导致父元素 高度塌陷?

这是因为内部的元素设置float:left || right后,就丢失了clear:both和display:block(持怀疑态度)的样式,所以外部的父容器不会被撑开。


举个 :

子元素未设置浮动,父元素自动被撑开

<body><div class="father"><div class="son"></div></div></body>
<style>.father {width: 400px;border: 1px solid blue;}.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;}
</style>   

4509ec8c9c17eb48ca0b9823ef170e5d.png

子元素设置浮动,父元素高度塌陷

36db2bb4908b5fde09b176e21ff71ffb.png
<body><div class="father"><div class="son"></div></div>
</body>
<style>.father {width: 400px;border: 1px solid blue;}.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;}
</style>

闭合浮动的常见解决方案

最终,我们要的效果是要跟没设置浮动之前的效果一样,让父元素高度自适应:

4889adc09dd46fbb578d9e43291d1016.png
  • 在浮动元素之后添加清除浮动的子元素:
<div class="father"><div class="son"></div><div class="clearFloat"></div>
</div>
<style>
.father {width: 400px;border: 1px solid blue;
}
.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;
}
.clearFloat {width: 100%;height: 0;clear: both;
}
</style>

父元素设置 overflow: hidden

<div class="father"><div class="son"></div>
</div>
<style>
.father {width: 400px;border: 1px solid blue;overflow: hidden;
}
.son {width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;
}
</style>

是不是很神奇!因为子元素的浮动,会导致父元素误认为content高度为0(即蓝色边框为一条线),所以父元素设成overflow:hidden溢出隐藏的话,直觉上应该子元素由于溢出导致不显示才对。但真实效果是:父元素设成overflow:hidden溢出隐藏后,父元素高度居然自适应了!这是怎么回事呢?是因为 BFC(Block Formatting Context),感兴趣的童鞋,点击链接了解一下哈...

用 :after 伪元素,思路是用:after元素在div后面插入一个隐藏文本”.”,隐藏文本用clear来实现闭合浮动

.father:after {clear: both;content: ".";   //任意文本如“dfgdfg”display: block;height: 0;      //高度为0且hidden让该文本彻底隐藏visibility: hidden;
}

更多大型互联网web前端实战操作,在线解析,学习指导,学习资源,点:【WEB前端资源】

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

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

相关文章

idea 远程调试_我的天!你竟然不会用IDEA远程调试Tomcat...

# 准备工作明确的远程服务器的IP地址&#xff0c;某些我是&#xff1a;192.168.92.128关掉服务器防火墙&#xff1a;service iptables stop# 本地远程服务器配置添加远程服务器&#xff0c;如下图复制远程服务器自动生成的JVM参数&#xff0c;等下有用&#xff0c;如下图&#…

跨域获取后台数据undefined_同源策略amp;JSONP跨域

同源策略&JSONP跨域同源策略 对于同源的定义&#xff0c;MDN给出了这样的解释&#xff1a;如果两个页面的协议&#xff0c;端口&#xff08;如果有指定&#xff09;和主机都相同&#xff0c;则两个页面具有相同的源。如何确定两个页面是否同源&#xff0c;只要比较两个页面…

python 除数不能为零的报错有哪些_【社区精选40】Python错误处理及代码调试方法(文末赠书中奖名单)...

本文整理自爱数据学院中的问答更多精彩问答&#xff0c;进入下方社区网站查看http://www.lovedata.cn/invitation社区精选话题 第40期Python错误处理及代码调试方法一次写完代码程序并能够正常运行的概率很小很小&#xff0c;总会有各种各样的错误bug需要处理。有的报错简单&a…

mac mysql prefpane_【MySQL数据库开发之一】Mac下配置安装数据库-MySQL

本站文章均为那么从今天开始陆续会更新数据库和Hibernate框架的博文&#xff0c;也是Himi学习的历程记录&#xff0c;希望大家能共同讨论和研究&#xff1b;OK&#xff0c;本篇简单介绍安装吧&#xff0c;首先到MySQL官方网站&#xff1a;如上图&#xff1a;点击DOWNLOAD &…

系统新模块增加需要哪些步骤_想要吸引人流,儿童乐园需要增加哪些新设备呢...

儿童乐园是现今最火爆的一个投资项目&#xff0c;因为它的主要消费群体是孩子&#xff0c;而现在的家长们对孩子们的宠爱&#xff0c;基本都会答应让孩子们去儿童乐园里面玩耍。但是儿童乐园的投资经营者也会遇见一些小问题&#xff0c;例如儿童乐园添加设备要怎么选择呢&#…

照片打印预览正常打印空白_小米发布口袋照片打印机,可无墨打印3寸背胶照片...

9月11日消息&#xff0c;小米推出一款小米口袋照片打印机。与之前的小米米家照片打印机相比&#xff0c;这款新品更加小巧便携&#xff0c;体积接近充电宝大小&#xff0c;净重仅181g&#xff0c;便于随身携带。小米口袋照片打印机采用ZINK无墨技术打印&#xff0c;即使用嵌入纸…

MySQL优化调优有没有做过_MySQL 调优/优化的 100 个建议

MySQL是一个强大的开源数据库。随着MySQL上的应用越来越多&#xff0c;MySQL逐渐遇到了瓶颈。这里提供 101 条优化 MySQL 的建议。有些技巧适合特定的安装环境&#xff0c;但是思路是相通的。我已经将它们分成了几类以帮助你理解。MySQL监控MySQL服务器硬件和OS(操作系统)调优&…

mysql核心参数_MySQL技术体系之核心参数

本文主要基于MySQL 5.7版本的数据库环境&#xff0c;总结my.cnf文件中核心参数的配置使用&#xff0c;让更多的人对MySQL技术体系有更全面、更专业的深度了解。一、客户端核心参数1、port端口号&#xff0c;默认33062、socketSocket文件地址&#xff0c;默认以.sock为文件名称后…

jtag引脚定义_从逆向分析的角度学习硬件调试技巧JTAG,SSD和固件提取

我想从逆向的角度做了深入了解JTAG&#xff0c;JTAG是许多嵌入式CPU使用的硬件级别调试机制&#xff0c;我希望通过这篇文章从逆向工程师的角度解释如何使用JTAG&#xff0c;并在此过程中提供一些实际示例。0x01 研究目标通过这篇文章&#xff0c;我希望做到以下几点&#xff1…

python virtualenv conda_在vscode中启动conda虚拟环境的思路详解

问题&#xff1a;cudatoolkit cudnn 通过conda 虚拟环境安装&#xff0c;先前已经使用virtualenv安装tf&#xff0c;需要在conda虚拟环境中启动外部python虚拟环境思路&#xff1a;conda prompt即将 [虚拟环境位置] 以参数形式传入 [activate.bat]VSOCDE中的设置添加以下语句{&…

远程过程调用失败_Java开发大型互联网RPC远程调用服务实现之问题处理方案

引言RPC(Remote Procedure Call Protocol)——远程过程调用协议&#xff0c;它是一种通过网络从远程计算机程序上请求服务&#xff0c;而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在&#xff0c;如TCP或UDP&#xff0c;为通信程序之间携带信息数据。在OSI网络…

chrome 新的session 设置_为什么还是由这么多人搞不懂Cookie、Session、Token?

作者&#xff1a;不学无数的程序员链接&#xff1a;https://urlify.cn/Yfm6Vr# Cookie洛&#xff1a;大爷&#xff0c;楼上322住的是马冬梅家吧&#xff1f; 大爷&#xff1a;马都什么&#xff1f; 夏洛&#xff1a;马冬梅。 7大爷&#xff1a;什么都没啊&#xff1f; 夏洛…

eview面板数据之混合回归模型_【视频教程】Eviews系列25|面板数据回归分析之Hausman检验及本章常见问题解答...

点击上方关注我们!本期我们学习Eviews统计建模最后一部分--面板数据回归分析Hausman检验及本章常见问题解答。实操&#xff1a;Hausman检验判断是固定效应模型还是随机效应模型上期我们讲到模型判断若选择模型2,需进一步通过Hausman检验判断固定效应还是随机效应&#xff0c;接…

mybatis mysql selectkey_Mybatis示例之SelectKey的应用

SelectKey在Mybatis中是为了解决Insert数据时不支持主键自动生成的问题&#xff0c;他可以很随意的设置生成主键的方式。不管SelectKey有多好&#xff0c;尽量不要遇到这种情况吧&#xff0c;毕竟很麻烦。SelectKey需要注意order属性&#xff0c;像Mysql一类支持自动增长类型的…

java treetable_在Swing中创建TreeTable | 学步园

TreeTable是Tree和Table的一个结合&#xff0d;就是一个即能够展开和收起行&#xff0c;同时也能够显示多个列的组件。在Swing的标准包里没有一个叫做JtreeTable的组件&#xff0c;但是我们很容易通过把Jtree做成Jtable的渲染器来创建一个这样的组件。这篇文章就是关于如何使用…

python期末大作业_大一期末考试很重要,考得好不仅有机会有钱拿,还有机会换专业...

现阶段很多高校放寒假的时间已经公布&#xff0c;这也就意味着&#xff0c;大学期末考试即将到来。对于大一新生来说&#xff0c;大学的期末考试是比较新鲜的&#xff0c;因为大家都没有经历过。经历过大学考试的学生&#xff0c;都知道大学的大概学习模式&#xff0c;一般情况…

java http 302重定向_Java 纯HTTP请求 禁止302自动重定向

Java 纯HTTP Get请求获取响应内容&#xff0c;如果发生302重定向&#xff0c;继而模拟请求域获取重定向后的响应内容。关键点&#xff1a;设置conn.setInstanceFollowRedirects为false即可示例代码public static void main(String[] args) {try {StringBuffer buffer new Stri…

python 且_Pyface库:一个基于pyqt、pyside、wx且简化的python的GUI

1 说明&#xff1a;1.1 Pyface库由大名鼎鼎的enthought出品。1.2 介绍&#xff1a;1.2.1 英文&#xff1a;traits-capable windowing framework.The pyface project contains a toolkit-independent GUI abstraction layer, which is used to support the "visualization&…

java方法的参数类型_Java 基础 14 方法的重载 与 方法参数类型详解

1.1 方法重载的概述和特点方法重载概述在同一个类中&#xff0c;允许存在一个以上的同名方法&#xff0c;只要它们的参数个数或者参数类型不同即可。方法重载特点与返回值类型无关&#xff0c;只看方法名和参数列表在调用时&#xff0c;虚拟机通过参数列表的不同来区分同名方法…

crv仪表上的i是什么指示灯_汽车打不着火是怎么回事,仪表盘汽车发动机故障灯亮是什么情况故障指示灯图解大全集...

如果打不着火&#xff0c;那有可能是起动机坏了&#xff0c;有可能是电池没电了&#xff0c;有可能是电路出现了问题&#xff0c;还有可能是点火系统出现了问题。汽车发动机的点火系统主要部件是火花塞和点火线圈&#xff0c;火花塞是一个需要定期更换的易损件。如果火花塞长时…