清除float浮动三种方式

Float的作用?

w3c的官方解释:

Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

看一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.parent {
  background: blue;
  height: 400px;
  color: white;
  font-family: Arial, sans-serif;
}

.child1 {
  width: 30px;
  height: 30px;
  background: red;
  float: left;
}

.child2 {
  background: green;
  height: 100px;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2">This text flows around the red box. The green box that holds the text doesn‘t.</div>
  </div>
</body>
</html>

效果如下:

注意到绿色的box表现的就像红色的box根本不存在一样,但是白色的文字却“浮动”在红色box周围。

这就是float做的事情:它们导致其他的浮动元素和inline内容浮动在它们周围,但是其他block box却完全不理会float。

w3c的定义就像是在描述绝对定位元素一样,我更加倾向于将float描述成float是脱离正常流(normal flow)且和兄弟block元素相关的。

不管怎样解释,你应该知道不论浏览器怎样先进,它们永远不会自动的清除浮动——因为float的行为不是一个bug,而是特点。

清除浮动的方法

让我们先说主流的方法:

clear: both/left/right
除了“none”以外的任何属性值都将导致元素相应位置不允许浮动。

overflow: hidden/auto
float导致了元素坍塌,如果你想让父元素包含所有的float属性元素,那么考虑在父元素上使用overlow:hidden/auto

clearfix
最好的方法是使用clearfix属性,下面的代码适用到IE6。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* For IE 6/7 only */
.clearfix {
    *zoom: 1;
}

如果你想适应IE8及其以上的,只要

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

你所要做的就是将clearfix类添加到包含floated的父元素上,你当然也可以使用overlow:hidden但是会导致很多布局上的其他问题。

时间: 2024-10-11 02:09:15

清除float浮动三种方式的相关文章

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样

css清除浮动float的三种方法总结

转载地址:https://my.oschina.net/leipeng/blog/221125 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</

父元素div清除浮动的三种方式

第一种做法: 父元素也设置:浮动 <style> div.b{ float:left; } div.c{ float:left; width:250px; height:100px; } div.d{ float:right; width:250px; height:100px; } </style> <div class="b"> <div class="c"></div> <div class=&

untiy 3d ShaderLab_第6章_VertexLit渲染路径_4_顶点照明和Unity存放光源的第三种方式

6.4顶点照明和Unity存放光源的第三种方式 6.4.1   Unity为Vertex Pass准备的光源 是不是绝望了?世界没有光明怎么能行呢?当然不行,光明马上就来,Unity把它放到了unity_LightPosition[4]数组中. 可以简单地告诉你一个结果:在LightMode = Vertex的Pass内,unity_LightPosition[4]和unity_LightColor[4]是存取光源数据最可靠的第一首选手段,无论在Camera的RenderingPath为何,Ve

css 圣杯布局三种方式

所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应.我们可以用浮动.定位以及flex这三种方式来实现 一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索: 可以看到左边有个菜单按钮,中间是搜索框,右边是登录两个文字,左右大小是固定的,而中间部分则是随着手机屏幕尺寸的大小而自适应.   第一种方法 float实现: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &

Java Class类以及获取Class实例的三种方式

T - 由此 Class 对象建模的类的类型.例如,String.class 的类型是Class<String>.如果将被建模的类未知,则使用Class<?>. [java] view plain copy print? public final class Class<T> extends Object  implements java.io.Serializable, java.lang.reflect.GenericDeclaration, java.lang.r

编写Unity3D着色器的三种方式

不管你会不会写Unity3D的shader,估计你会知道,Unity3D编写shader有三种方式,这篇东西主要就是说一下这三种东西有什么区别,和大概是怎样用的. 先来列一下这三种方式: fixed function shader vertex and fragment shader surface shader 为什么Unity3D要提供三种shader的编写方式呢?那是因为三种方式的编写的难易度有区别,对应着不同的使用人群.其实我觉得这是Uniy3D想得有点多了,着色器不单止是为了实现效果,

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit