清除浮动

之前给大家介绍两种浮动闭合的办法 CSS清除浮动 万能float闭合 ，得知很多同学都在使用下面的骨灰级解决办法： .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。 但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。 最优浮动闭合方案（这是我们推荐的）： .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{*+height:1%;} 用法很简单，在浮动元素的父云素上添加class=”demo clearfix”。 你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了： .demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}.demo,.demo2{*+height:1%;} 以上写法就避免了改变html结构，直接用css解决了。 很拉轰的浮动闭合办法： .clearfix{overflow:auto;_height:1%}

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。 可能你遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能右面内容覆盖掉左面的DIV布局，形成DIV与DIV覆盖重叠现象，这些是什么问题如何解决？ 接下来博主将通过案例来演示这两种兼容性DIV覆盖重叠现象问题，并解释原因与解决方法。 案例一、上下结构的DIV盒子覆盖 1、首先，创建一个实例网页DIV CSS实例HTML代码： 实例代码说明： 设置两个最大的div盒子分别CSS命名为“.boxa”和“.boxb”，两个大盒子宽度相同均为400px； 对“.boxb”设置1px的黑色边框，高为40px，背景为黑色； 然后在“.boxa”里添加两个小盒子，一个浮动靠左，一个浮动靠右； 两个小盒子分别命名为“.boxa-l”“.boxa-r”； 对两个小盒子，同时设置红色边框、css高为80px、宽度分别为280px和100px。 2、实例效果： 3、问题分析 目的效果：“.boxa”和“.boxb”布局是上下结构， “.boxa-l”和“.boxa-r”分别位于 “.boxa”的左右； 实际效果：在浏览器中看到效果是两个盒子里内容是 实现上下结构效果 ，但“.boxb”这个DIV跑到“.boxa

一、什么是清除浮动？ 先说下为什么需要清除浮动。 一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）之后会影响它的兄弟元素的位置和父元素产生高度塌陷。具体的影响方式较为复杂，要看这些兄弟元素是块级元素还是内联元素； 若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行； 若是内联元素，则会尽可能围绕浮动元素，常用来做图文混排效果。 另外，浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。 无论是影响兄弟元素还是高度塌陷的问题，都不是我们使用浮动的目的，设置浮动，只是为了改变一个元素的布局，但最终的结果却造成了更多不必要的影响，这不利于布局， 因此我们需要清除这些额外的影响，也就是本文要介绍的清除浮动，其实更加准确的说，是清除浮动带来的额外影响。 二、清除浮动的常见方法 1、clear 说起清除浮动，大家肯定会想起 clear: both ，的确，这是 CSS 中清除浮动的属性，clear 有both/left/right/none/inherit 几个属性值，

一、抛一块问题砖（display： block）先看现象： 分析HTML代码结构： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div> 分析CSS代码样式： .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .div1{width: 80px;height: 80px;background: red;float: left;} .div2{width: 80px;height: 80px;background: blue;float: left;} .div3{width: 80px;height: 80px;background: sienna;float: left;} 这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响： （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示 二、清楚css浮动： 方法一：添加新的元素 、应用 clear