css浮动属性float详解,css浮动 高度坍塌

一：高度塌陷问题

　　在文档流中，父元素的高度默认由子元素扩展，即子元素的高度与父元素一样高。但是，当给子元素设置了浮动时，子元素将完全离开文档流，这将导致子元素无法支持父元素的高度，从而导致父元素的高度折叠。

　　因为父元素的高度折叠，父元素下的所有元素都会上移，导致页面布局混乱。

　　因此，在开发中必须避免高崩溃的问题，

二：4种高度塌陷解决方案

　　解决方案一

　　将父元素的高度写死是避免崩溃问题的最简单的方法。

　　但是一旦写死了高度，父元素的高度不会自动适应子元素的高度，所以不推荐这种方案。

　　解决方案二：

　　打开BFC属性

　　页面中的隐式属性：块格式化上下文是块格式化上下文，简称BFC。当打开元素的BFC时，该元素将成为一个独立的布局区域，不会影响布局中的外部元素。BFC被理解为一个封闭的大盒子，盒子里面的元素不会影响到外面。

　　打开BFC后，元素将具有以下特征：

　　1.父元素的垂直外边缘不会与子元素重叠。

　　2.打开BFC的元素不会被浮动元素覆盖。

　　3.打开BFC的元素可以包含浮动子元素(可以解决高度折叠)

　　如何打开元素的BFC

　　1.设置浮动元素(不推荐)

　　使用这种方法打开，虽然可以扩展父元素，但是会丢失父元素的宽度，而且使用这种方法还会导致下面的元素上移，解决不了问题。2.将元素设置为inline-block(不推荐)。

　　可以解决问题，但是会导致宽度的损失。不建议使用这种方法。3.将元素的溢出设置为不可见的值。

　　4.设置元素的绝对位置。

　　推荐方式：将溢出设置为隐藏是副作用最小的BFC打开方式。解决方案三：

　　使用clear属性

　　Clear可以用来清除其他浮动元素对当前元素的影响。

　　可选值：

　　无，默认值，不清除左浮动，清除左边浮动元素对当前元素右的影响，清除右边浮动元素对当前元素两者的影响，清除两边浮动元素对当前元素的影响，清除对他影响最大的元素的浮动。知道了clear属性后，我们可以直接在高度折叠的父元素的末尾添加一个空白的div。因为这个div不浮动，所以可以扩展父元素的高度，然后清除并浮动，这样就可以通过这个空白div扩展父元素的高度，基本没有副作用。

　　当然这种方法可以解决问题，但是会给页面增加冗余结构。

　　解决方案四：

　　通过after伪类将一个空白块元素添加到元素的末尾，然后清除float。这样可以达到和添加div一样的效果，并且不会给页面增加额外的div。这是我们最推荐的方式，几乎没有副作用。

　　. box1:在{ undefined/* Add a content */content:“”之后；/*转换为块元素*/display:block；/*清除两边的浮动*/Clear:both；}!DOCTYPE htmlhtmlheadmeta charset= UTF-8 title/title style type= text/CSS . box 1 { border:1px纯红色；背景色：浅绿色；} .box2 {宽度：100px高度：100px背景色：蓝色；/* margin-top:100px；*//* float:left；*/}.box1:在{/*之后添加一个content */content: ；/*转换为块元素*/display:block；/*清除两边的浮动*/Clear:both；}/style/headbydivclass= box 1 div class= box 2 /div/div/body/html就是这样。本文介绍了CSS中浮动浮动导致的高崩溃问题及四种解决方案。关于CSS中浮动float的高折叠，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。