css面试精讲之防止高度坍塌的4种方式

Q1：BFC专题

1、防止高度坍塌的4种方案

问题重现

问题重现1：

父元素的高度，都是由内部未浮动子元素的高度撑起的。

问题重现2：

子元素浮动，还会对付元素造成影响。

如果子元素浮动起来，就不占用普通文档流的位置。父元素高度会失去支撑，就造成高度坍塌。

问题重现3：

问题重现4：即使有部分元素留在普通文档流布局中支撑着父元素，如果浮动起来的元素高度高于留下的元素。那么浮动元素的高度会超出父元素边框，用户体验同样不好！

解决方案

1.为父元素纸质overflow:hidden属性

原理： CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。

缺点：如果刚好父元素有些超范围的子元素内容需要显示(比如，个别position定位的子菜单项)，不想隐藏，就会发生冲突

2.在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）

原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理

3.设置父元素也浮动

原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素。

4.为父元素末尾伪元素设置clear:both

优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题父元素::after{ content:“”; display:table; clear:both; height:0 }

css面试精讲之防止高度坍塌的4种方式相关推荐

java基础：Java七大外企经典面试精讲视频
java基础:Java七大外企经典面试精讲视频对于很多应聘java程序员的求职者来说,全面掌握java面试技巧,确实是自己找到一个好工作的敲门砖.今天小编在这里给大家分享一个关于java基础的Jav ...
面试精讲(guigu)
文章目录精讲 1. 基础部分 2. 对象 3. 原型 4. 预解析 5.执行上下文 6. 作用域 7. 闭包 9. 同步/异步 11. Promise 精讲 1. 基础部分变量:用来存放数据,保存 ...
架构面试精讲第三节分布式技术RPC、MQ、Redis、Mysql、restful详解
07 RPC:如何在面试中展现出"造轮子"的能力? 我们知道,很多应用系统发展到一定规模之后,都会向着服务化方向演进,演进后的单体系统就变成了由一个个微服务组成的服务化系统,各个微 ...
架构面试精讲第四节高并发下高可用、高性能架构详解
15 如何向面试官证明你做的系统是高可用的? 我们已经用了五个模块分别讲了架构原理.分布式技术.中间件.数据库,以及缓存,这些都是面试中必考的技术领域和技术点,又因为我们处在大数据和互联网时代,所以高 ...
面试精讲之面试考点及大厂真题 - 分布式专栏 14 全面了解Kafka的使用与特性
14全面了解Kafka的使用与特性每个人都是自己命运的主宰. --斯蒂尔斯引言 (图片来源:https://medium.com/) 上一小节说了消息队列的使用,那么面试官也会顺着MQ话题展开讨论 ...
面试官问我：创建线程有几种方式？我笑了
前言多线程在面试中基本上已经是必问项了,面试官通常会从简单的问题开始发问,然后再一步一步的挖掘你的知识面. 比如,从线程是什么开始,线程和进程的区别,创建线程有几种方式,线程有几种状态,等等. 接下 ...
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
android 图片铺满imageview,简单实现ImageView宽度填满屏幕，高度自适应的两种方式...
两种方式 1.重写View的onMeasure方法参考这里easion_zms的专栏核心代码 protectedvoidonMeasure(intwidthMeasureSpec,intheigh ...
面试精讲之面试考点及大厂真题 - 分布式专栏 04 谈谈你对分布式的理解，为什么引入分布式？
04谈谈你对分布式的理解,为什么引入分布式? 引言刚刚毕业第一份工作,没接触过分布式微服务相关的知识,后来换工作才了解到这些,面试官看了我简历里写了分布式相关,就开始揪住这个问题问,虽然一知半解地说 ...
面试精讲之面试考点及大厂真题 - 分布式专栏 23 分布式系统下分布式锁的实现
23 分布式系统下分布式锁的实现困难只能吓倒懦夫懒汉,而胜利永远属于敢于等科学高峰的人. --茅以升引言锁是开发过程中十分常见的工具,你一定不陌生,悲观锁,乐观锁,排它锁,公平锁,非公平锁等等, ...

css面试精讲之防止高度坍塌的4种方式

Q1：BFC专题

1、防止高度坍塌的4种方案

问题重现

解决方案

1.为父元素纸质overflow:hidden属性

2.在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）

3.设置父元素也浮动

4.为父元素末尾伪元素设置clear:both

css面试精讲之防止高度坍塌的4种方式相关推荐

最新文章

热门文章