html 高度塌陷,CSS之高度塌陷问题解决方案

.box1{

border: 10px red solid;

* 根据W3C的标准，在页面中都有一个隐含的属性叫Block Formatting Context

* 简称 BFC，该属性可以设置打开或者关闭。默认是关闭的。

* 当开启元素的BFC后，元素将会有一下特性：

* 1、父元素的外边距不会和子元素重叠

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

* 3、父元素开启BFC可以包含浮动的子元素

* 如何开启BFC

* 1、开启元素浮动

* -虽然可以撑开父元素，但是宽度丢失，这种方式也会使下方元素上移

* 2、设置元素绝对定位

* --虽然可以撑开父元素，但是宽度丢失，这种方式也会使下方元素上移

* 3、设置元素为inline-block

* -可以解决问题，但是会导致宽度丢失，不推荐使用

* 4、将父元素的overflow设置为非visible的值

* -推荐方式

*但在IE6及以下的浏览器并不支持BFC，但是含有另一个隐含的属性叫做hasLayout

* 该属性作用和BFC类似，所以我们可以开启hasLayout来解决问题

* 开启方式有很多种，我们直接选择一种副作用最小的

* 直接将元素的zoom属性设置为1即可

/*方法1*/

/*float: left;*/

/*方法2*/

/*position: absolute;*/

/*方法3*/

/*display: inline-block;*/

overflow: auto;

* zoom是放大的意思，数字为几就是放大几倍

/*zoom : 1*/

}

.box2{

width: 100px;

height: 100px;

background-color: blue;

float: left;

}

.box3{

height: 100px;

/*width: 100px;*/

background-color: yellow;

}

效果：

本文来源于网络：查看 >https://blog.csdn.net/november_chopin/article/details/75795797

html 高度塌陷,CSS之高度塌陷问题解决方案相关推荐

css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
css 左右布局高度自适应,CSS布局-高度自适应
前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式. 单个自适应当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0; ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
CSS高度塌陷问题（float塌陷margin塌陷）
目录一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
css高度自适应出现盒子高度塌陷问题
在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题,造成这个问题的原因就在于父盒子没有设置高度,子盒子有浮动这里有四种解决高度塌陷的方法一.给父盒子添加高度,这个可以从根本上解决问题, ...
CSS解决高度塌缩问题和外边距重叠问题
高度塌陷的问题在浮动布局中,父元素默认是被子元素撑开的当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失后,其下的元素会自动上移, ...
CSS解决高度自适应问题
CSS解决高度自适应问题参考文章: (1)CSS解决高度自适应问题 (2)https://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html ...
如何转换高度：0; 达到高度：自动；使用CSS？
我正在尝试使用CSS过渡使<ul>滑落. <ul>从height: 0; . 悬停时,将高度设置为height:auto; . 但是,这导致它只是显示而不是过渡, 如果我从he ...
CSS外框高度自动适应
当有浮动float时,最外框会不跟随内容的高度而高: 解决办法一: 清除浮动 clear:both <!DOCTYPE html> <html xmlns="http:/ ...
div+css中设置了float属性后如何让外层的高度随着内层的高度大小自动调整
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

html 高度塌陷,CSS之高度塌陷问题解决方案

html 高度塌陷,CSS之高度塌陷问题解决方案相关推荐

最新文章

热门文章