浮动出现问题解决方法

float 是css 的定位属性。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分（半脱离文档流）。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了（完全脱离文档流），就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。脱离文档流问题请看另一篇笔记http://blog.csdn.net/qq_21184771/article/details/56049662

1.float: right 右浮动时，靠右换行（错行）的解决方法
当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。

<!--按下面这种顺序输入的方法是错误的:--><div>这是非浮动元素，右边是右浮动元素<span style="float: right">右浮动</span><div><!--正确的方法:--><div><span style="float: right">右浮动</span>这是非浮动元素，右边是右浮动元素</div>

2.浮动造成换行问题

例子如：两个div设置了左浮动，想第三个div换行
（如果第三个也是左浮动，则宽度小于父元素剩余宽度的话，就不会换行；如果第三不是浮动等特殊情况，会覆盖第一个div位置，但文字不会覆盖而是环绕）
第三个也是左浮动第三不是浮动等特殊情况

1.两个div的父元素设置宽度100%，float:left;若第三左浮动的div就换行了。但是这样改变了宽度。而且如果第三个不是浮动也不能满足要求。

2.给第三div设置style="clear:both"，或者加<br />。

<style>           .left {            float:left;            width:100px;            height:100px;            background-color: #dd0000;            opacity: 0.5;        }        .left2 {            float:left;            width:40px;            background-color: green;            height:40px;        }        .div3 {            /*float:left;*/            clear:both;            width:50px;            height:50px;            background-color: #3c32ff;        }</style><div class="temp">    <div class="left">left1</div>    <div class="left2">left2</div>    <div class="div3">div3想换行</div></div>

3.浮动会造成 父元素塌陷 问题。
如果一个父元素的所有子元素都是浮动的，子元素的浮动确定了自身位置，尽管子元素有高度，但是不会影响到父元素的高度，那么这个父元素高度就是0（若没有指的宽度，就是父元素宽度）。如果想要父元素内的浮动元素占有父元素的高度，就需要清除浮动。

http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

解决方法：

3.1 有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。

用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。

<div class="temp">    <div class="left">left</div>    <div class="right">right</div>    <div style="clear:both"></div></div><style>    .temp {        border:1px solid red;        width:200px;        background-color: yellow;    }    .left {        float:left;        width:50px;        height:50px;        background-color: blue;    }    .right {        float:right;        width:50px;        background-color: green;    }</style>

3.2 一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中置“overflow”的属性值为“hidden”

在IE6里面，父容器是需要设置一个“width”和“height”。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。

使用“overflow”技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的“span”元素移动到父容器的外面，或者你想给元素添加一个盒子阴影或制作一个下拉菜单，可以看到元素的盒子阴影被切断在父元素之内。

要慎用overflow属性，因为 设置overflow为非visible值，将导致容器生成新的格式化上下文，其布局、相对于浮动的行为等会发生显著变化，清除浮动只不过这一系列变化的其中一个附带作用。

更多弊端的表现，不论是早先Firefox无端的产生focus、还是在某些情况下触发滚动条、截断绝对定位的层，等等等等，太多了。

3.3  根据上下文，清除浮动更好的方法是clearfix技巧。

3.3.1基本上是用：父元素上使用after伪元素来新加一个内容    再谈清除浮动：https://swordair.com/on-clearing-float-again/

.clearfix:after {    content: ".";     /**//*内容为“.”就是一个英文的句号而已。如果不写在Firefox旧版本下会有问题。*/    display: block;   /**//*加入的这个元素转换为块级元素。*/    clear: both;     /**//*清除左右两边浮动。*/    visibility: hidden;      /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/    line-height: 0;    /**//*行高为0；*/    height: 0;     /**//*高度为0；*/    font-size:0;    /**//*字体大小为0；*/}.clearfix { *zoom:1;}   /**//*这是针对于IE6/7的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/.clearfix {display: inline-block;} /* for IE/Mac 鉴于Mac版IE的稀少到可以忽略的占有量以及验证问题，可以忽略*/

：after伪元素内容是一个点，本身用来清除浮动，其他代码则是为让这个伪元素不可见。所以很多其他的版本里，可能还会添加 font-size:0;line-height:0; 来进一步保证元素不可见。

3.3.2 还有一个改进的做法：before和after两个伪元素来做，但是还是上面比较常用。http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪元素。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。

/*“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。*/.clearfix:before,.clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;}.clearfix {  *zoom: 1;}

 单个伪元素（下面不是很明白是什么意思）

值得注意的是，目前每个元素只有一个“:before”和“:after”伪元素。当你尝试使用其他的“:before”和“:after”的clearfix技巧，你的内容可能无法达到想要的效果。