float 是 css 的定位属性。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分(半脱离文档流)。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了(完全脱离文档流),就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。脱离文档流问题请看另一篇笔记http://blog.csdn.net/qq_21184771/article/details/56049662
1.float: right 右浮动时,靠右换行(错行)的解决方法
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。 把右浮动的标签放在正常标签的前面即可。
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(若没有指的宽度,就是父元素宽度)。如果想要父元素内的浮动元素占有父元素的高度,就需要清除浮动。
如果一个父元素的所有子元素都是浮动的,子元素的浮动确定了自身位置,尽管子元素有高度,但是不会影响到父元素的高度,那么这个父元素高度就是0(若没有指的宽度,就是父元素宽度)。如果想要父元素内的浮动元素占有父元素的高度,就需要清除浮动。
解决方法:
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技巧,你的内容可能无法达到想要的效果。