金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 说说Float那个被埋没的志向,清除浮动的方法

说说Float那个被埋没的志向,清除浮动的方法

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 01:15

CSS魔法堂:说说Float那个被埋没的志向

2016/05/10 · CSS · 2 评论 · float

本文作者: 伯乐在线 - ^-^肥仔John 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

详解CSS float属性

2015/11/09 · CSS · float

原文出处: 小灰狼的脑瓜   

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态。本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案。

彻底理解浮动float CSS浮动详解 清除浮动的方法,floatcss

CSS定位问题(1):盒模型、浮动、BFC

2016/04/27 · CSS · BFC, 定位, 盒模型

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

引子:

在谈到css定位问题的时候先来看一个小问题:

已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充.且左右div自适应.

效果如下图: 金沙棋牌官方平台 1

这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.

第一种实现方法,是借助css3的新属性calc,实现代码如下:

CSS

body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态计算,兼容不同浏览器的类型需要加识别的前缀,非常重要的是要有空格*/ width: -webkit-calc(50% - 50px); width: calc(50%-50px); height: 200px; } .mid_div { width: 100px; height: 200px; margin-left: -50px; background-color: #20FFDA; margin:0 auto; } .right_div { background-color: #FFF81B; height: 200px; width: -webkit-calc(50% - 50px); } div{display:inline-block;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
    margin: 0;
    padding: 0;
    font-size:0;
}
.left_div {
    background-color: #62FF09;
    /*calc是css3属性可以动态计算,兼容不同浏览器的类型需要加识别的前缀,非常重要的是要有空格*/
    width: -webkit-calc(50% - 50px);
    width: calc(50%-50px);
    height: 200px;
}
.mid_div {
    width: 100px;
    height: 200px;
    margin-left: -50px;
    background-color: #20FFDA;
    margin:0 auto;
}
.right_div {
    background-color: #FFF81B;
    height: 200px;
    width: -webkit-calc(50% - 50px);
}
div{display:inline-block;}

第二种实现方式就是借助与display属性,将所有的div框具有table的单元格的属性.

代码如下:

CSS

* { padding: 0; margin: 0; } .left_div, .mid_div, .right_div { height: 200px; display: table-cell; } .left_div { width: 50%; background: #369; } .mid_div { //非IE识别的属性,(>=IE8) min-width: 100px; width: 100px; background: #697; } .right_div { width: 50%; background: #126; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
    padding: 0;
    margin: 0;
}
.left_div, .mid_div, .right_div {
    height: 200px;
    display: table-cell;
}
.left_div {
    width: 50%;
    background: #369;
}
.mid_div {
    //非IE识别的属性,(>=IE8)
    min-width: 100px;
    width: 100px;
    background: #697;
}
.right_div {
    width: 50%;
    background: #126;
}

这里解决问题的主要思路是当中间的宽度确定后,因为所有div是单元格所以使用50%使左右的单元格平分剩下的宽度.

前言

定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了;2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征,若有纰漏望各位指正。

基础知识

float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。
浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。举例说明如下:
Html代码:

XHTML

<div class="box"> <span class="float-ele"> 浮动元素 </span> 普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流 </div>

1
2
3
4
5
6
<div class="box">
        <span class="float-ele">
            浮动元素
        </span>
        普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
</div>

CSS代码:

CSS

.box { background: #00ff90; padding: 10px; width: 500px; } .float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }
.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

金沙棋牌官方平台 2

float基本效果

由效果图可以看出,span元素周围的文字会围绕着span元素,而设置了float属性的span元素变成了一个块级元素的感觉,可以设置width和height属性。这是设置了float属性后的效果,关于float的详细细节,我们接下来详细讲解。

 我们把网页的常用的布局格式分为以下三种:

1.盒模型

盒模型又分IE盒模型和非IE盒模型: 看下面的一张图(来自维基百科):

金沙棋牌官方平台 3 由上面的图可以知道IE和非IE盒模型的区别主要是计算元素的宽度和高度不一样。

  1. IE浏览器: margin-left+width+margin-right
  2. 非IE浏览器:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

看一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-html</title> <style type="text/css"> *{margin:0;padding:0;} #body-box{ width:700px; height:500px; background-color:#FF00FF; /*overflow:hidden;*/ } .box-style{ width:500px; height:300px; border:10px dashed black; background-color:red; margin:10px 0 0 20px; padding: 10px 10px 10px 10px; } </style> </head> <body> <div id="body-box"> <div class="box-style">你好帅呀</div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-html</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #body-box{
            width:700px;
            height:500px;
            background-color:#FF00FF;
            /*overflow:hidden;*/
        }
        .box-style{
            width:500px;
            height:300px;
            border:10px dashed black;
            background-color:red;
            margin:10px 0 0 20px;
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <div id="body-box">
        <div class="box-style">你好帅呀</div>
    </div>
</body>
</html>

效果如下: 金沙棋牌官方平台 4

很明显我们发现一个问题,就是子元素的margin-top作用在了父元素上。

当我们给父元素添加一个overflow:hidden属性时,结果正常。

如下图: 金沙棋牌官方平台 5

这是为什么呢?

overflow 样式值为 非 visilbe 时,实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素,会重新计算其内部元素位置,从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩,在 CSS 3 草案中被变更为名词 Root Flow,顾名思义,是创建了一个新的根布局流,这个布局流是独立的,不影响其外部元素的。实际上,这个特性与 早期 IE 的 hasLayout 特性十分相似。

经过测试在IE8以上的浏览器表现与chrome和firefox浏览器表现效果相同。但是在IE7以下浏览器不用设置这个属性就可以表现正常的效果。如下图:

金沙棋牌官方平台 6

下面的文字出现错误: 很明显发现的一个问题就是IE8(包括IE8)以上浏览器的background-color是border+padding+content*.而IE8(不包括)是*padding+content。

上面的结论是我在 IE11 浏览器中模拟IE8IE9得出的结论,上面的文字是有问题的(可能是因为升级IE11后,浏览器的解析内核跟IE8和IE9不一样,因为微软IE浏览器的标准也是一直在改变的)。

在真实的IE8IE9background-color都仅仅是padding+content 。而IE11中background-colorborder+padding+content; 再来看一个示例,代码如下:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestBox</title> <style type="text/css"> body{margin:0;} .item1{ width:200px; height:300px; border:2px solid #f73bd6; padding:100px 0 0 0; } .item2{ width:150px; height:200px; margin:150px 0 0 0; border:2px solid #f73bd6; } </style> </head> <body> <div class="item1"> <div class="item2"></div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestBox</title>
    <style type="text/css">
    body{margin:0;}
    .item1{
        width:200px;
        height:300px;
        border:2px solid #f73bd6;
        padding:100px 0 0 0;
    }
    .item2{
        width:150px;
        height:200px;
        margin:150px 0 0 0;
        border:2px solid #f73bd6;
    }
    </style>
</head>
<body>
    <div class="item1">
        <div class="item2"></div>
    </div>
</body>
</html>

我非别在非IE浏览器(且>=IE8也同样的效果)中测试的结果如下:

金沙棋牌官方平台 7

在IE7中的效果如下图: 金沙棋牌官方平台 8

在<=IE6之下显示的效果如下(默认会将父级框撑开):

金沙棋牌官方平台 9

关于div的最小(最大)宽度和高度在IE8(>=)之上和非IE浏览器上都实现了min-height,maxheight,min-width,max-width这四个属性。

被埋没的志向——文字环绕

回忆一下我们一般什么时候会想用浮动呢?是多列布局还是多列布局呢:)?其实它向往的却是这个
金沙棋牌官方平台 10
它想干的就是这个——文字环绕,而且CSS2中除了浮动外没有其他属性可实现上述的效果。
那到底如何理解它的实现原理呢?下面我们采取分步剖析的方式来深入探讨吧!

float的详细细节

在说明float带来的详细细节之前,我们首先要了解一个概念。
包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素,前面叙述的例子中,div.box就是span元素的包含块。

了解完包含块的概念之后,首先要说明的浮动元素的第一个特性:不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则,下面我们来一一说明这些规则。
1.浮动元素在浮动的时候,其margin不会超过包含块的padding
这一点很简单,浮动元素的浮动位置不能超过包含块的内边界
HTML代码

XHTML

<div class="box">   <span class="rule1">   浮动元素   </span> </div>

1
2
3
4
5
<div class="box">
  <span class="rule1">
     浮动元素
  </span>
</div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
         .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

金沙棋牌官方平台 11

float规则一

这个例子中,box的padding是10px,浮动元素的margin是10px,合起来为20px,即浮动元素不会超过包含块的padding。
PS:如果想要元素超出,可以设置margin属性

2.如果有多个浮动元素,后面的浮动元素的margin不会超过前面浮动元素的margin
简单说就是如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
修改前面例子中的HTML代码如下:

XHTML

<div class="box"> <span class="rule1"> 浮动元素1 </span> <span class="rule1"> 浮动元素2 </span> <span class="rule1"> 浮动元素3 </span> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
        <span class="rule1">
            浮动元素1
        </span>
        <span class="rule1">
            浮动元素2
        </span>
        <span class="rule1">
            浮动元素3
        </span>
</div>

效果图如下:

金沙棋牌官方平台 12

float规则二

如图所示,浮动元素会一个一个排序下来而不会发生重叠现象。

3.如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
什么意思呢,我们要分两种情况来看。
(1)包含块的宽度大于两个浮动元素的宽度总和,举例如下:
HTML代码:

XHTML

<div class="box"> <span class="rule1"> 浮动元素1 </span> <span class="rule2"> 浮动元素2 </span> </div>

1
2
3
4
5
6
7
8
<div class="box">
     <span class="rule1">
         浮动元素1
     </span>
     <span class="rule2">
         浮动元素2
     </span>
</div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; } .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

金沙棋牌官方平台 13

float规则三情况1

这种情况很简单:包含块元素的宽度足够大,两个元素一个向左浮动,一个向右浮动,井水不犯河水。

(2)包含块的宽度小于两个浮动元素的宽度总和
修改浮动元素的宽度为300px,CSS代码如下:

CSS

.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; } .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

1
2
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

效果图

金沙棋牌官方平台 14

float规则三情况2

如果所示,如果包含块宽度不够高,后面的浮动元素将会向下浮动,其顶端是前面浮动元素的底端。

4.浮动元素顶端不会超过包含块的内边界底端,如果有多个浮动元素,下一个浮动元素的顶端不会超过上一个浮动元素的底端
这条规则简单说就是如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。举例如下:
HTML代码:

XHTML

<div class="box"> <p>在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,</p> <p class="rule1"> 浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1 </p> <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p> <p class="rule1"> 浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2 </p> </div>

1
2
3
4
5
6
7
8
9
10
<div class="box">
         <p>在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,</p>
         <p class="rule1">
             浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1
         </p>
         <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>
         <p class="rule1">
             浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2
         </p>
     </div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; } p { margin-top: 20px; margin-bottom: 20px; }

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; }
p { margin-top: 20px; margin-bottom: 20px; }

效果图

金沙棋牌官方平台 15

float规则四

如图所示,两个浮动元素,后面的浮动元素不会超过前面的浮动元素

5.如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会不会高于非浮动元素
这条规则也是显而易见的,在第4条规则中的例子,浮动元素有一个非浮动元素p,而浮动元素没有超过它。

6.浮动元素会尽可能地向顶端对齐、向左或向右对齐
在满足其他规则下,浮动元素会尽量向顶端对齐、向左或向右对齐,在第4条规则中的例子,浮动元素会尽可能靠近不浮动的p元素,左侧对齐
金沙棋牌官方平台 16

金沙棋牌官方平台,float规则六

  1.标准流。

 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的。
以前我们学习的都是标准流。
  注意:标准流使我们网页布局中最稳定的一种结构

关于body的问题:

看下面一段代码:

XHTML

<style type="text/css"> *{margin:0;padding:0;} div{ width:300px; height:200px; background-color:#9feb3d; } body{ border:5px solid #eb3dda; background-color:#3d3deb; } </style> <body> <div> <ul> <li>你是第1个</li> <li>你是第2个</li> <li>你是第3个</li> <li>你是第4个</li> <li>你是第5个</li> </ul> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
        *{margin:0;padding:0;}
        div{
            width:300px;
            height:200px;
            background-color:#9feb3d;
        }
        body{
            border:5px solid #eb3dda;
            background-color:#3d3deb;
        }
    </style>
<body>
    <div>
        <ul>
            <li>你是第1个</li>
            <li>你是第2个</li>
            <li>你是第3个</li>
            <li>你是第4个</li>
            <li>你是第5个</li>
        </ul>
    </div>
</body>

并且代码的效果图如下:

金沙棋牌官方平台 17

由上可以知道body是一个特殊的div(盒子)。它的background-color会延伸到margin。

切断关联看Float

‘float’
Value: left | right | none | inherit
Initial: none
Applies to: all
Inherited: no
当设置float:left后,元素对应的margin left edge会尽可能向所属的containing block的左边框靠近,若同一行中存在位于左侧的元素设置了float:left,则即会尽可能向该兄弟元素的margin right edge靠近.

XHTML

<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;"> <div style="background:#1F0;width:50px;height:50px;float:right;"></div> <div style="background:#F60;width:50px;height:50px;float:right;"></div> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;">
  <div style="background:#1F0;width:50px;height:50px;float:right;"></div>
  <div style="background:#F60;width:50px;height:50px;float:right;"></div>
</div>

金沙棋牌官方平台 18
(由于float:left突出不了效果,因此采用float:right作例子。其中蓝色区域就是containing block范围,绿和红色块采用向右浮动)
当设置浮动后,display:inline的实际值将被改写为display:block,因此不要再为display:inline;height:100px;line-height:0;float:left导致盒子content height为100px感到惊讶了。也不要为即使剩余空间不足以存放整个display:inline;float:left盒子,导致整个盒子下移到下一行排版而惊讶了.(若为Normal flow则会根据white-spacing、word-wrap和word-break决定盒子内部分内容换行,而不是整个盒子换行)简单来说并不是float:left让盒子具有不为五斗米折腰的气质,而是display:block的功劳,又由于浮动的盒子会以水平方向排版,因此我们可以以display:inline-block来理解浮动定位的水平排版和换行行为。

XHTML

<div style="background:#06F;width:200px;height:100px;"> <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span> <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;">
  <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span>
  <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span>
</div>

金沙棋牌官方平台 19
当设置浮动后,虽然display的实际值为block但就width:auto而言,我认为display更像是采用inline-block,宽度由子元素决定。这就是包裹性了!
(float:right同理,只是方向不同而已)
注意:在仅考虑浮动元素本身的前提下,float:left的效果与display:inline-block而父容器direction:ltr的效果是一样的,不同的是浮动元素不纳入父容器高度的计算当中

XHTML

<div style="border:solid 1px #06F;"> <span style="background:#F01;float:left;">float:left</span> </div> <br clear="both"/><br/> <div style="border:solid 1px #06F;"> <span style="background:#F01;display:inline-block;">float:none</span> </div>

1
2
3
4
5
6
7
<div style="border:solid 1px #06F;">
  <span style="background:#F01;float:left;">float:left</span>
</div>
<br clear="both"/><br/>
<div style="border:solid 1px #06F;">
  <span style="background:#F01;display:inline-block;">float:none</span>
</div>

金沙棋牌官方平台 20

float特殊情况

前面讨论了float需要遵守的一些规则,这些规则都是在比较常见的场景下展示的结果。下面我们来讨论一些不常见的情况。

      2. 浮动流

 使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以,我们布局的时候,能用标准流做的,就不用浮动做。  

标准流的概念:

在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。


头痛的开始——基于Normal flow看Float

用割裂的方式理解float并不难,难就难在结合Normal flow看Float。下面我们一起来探讨吧!警告,前方高能,前方高能!!

浮动元素的延伸性

在说浮动元素的延伸性之前,我们首先来考虑一个比较特殊的例子。
我们将span元素放在p元素内,并将其高度设置成高于p元素并且左浮动,这个例子的关键在浮动元素高度高于父元素。
HTML代码

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="high-float"> 浮动元素比父级元素高 </span> </p> <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>

1
2
3
4
5
6
7
<p>
         在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
         <span class="high-float">
             浮动元素比父级元素高
         </span>
     </p>
     <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>

CSS代码

CSS

p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; } .high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

1
2
p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; }
.high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

效果图

金沙棋牌官方平台 21

浮动元素高度大于父级元素

在这个例子中,浮动元素高度高于父元素,可以看到浮动元素超出了父元素的底端。
这种情况要怎么解决呢,只要将父元素也设置成浮动即可,我们将第一个p元素设置成左浮动,效果如下
金沙棋牌官方平台 22

浮动元素延伸性

将父元素p设置成float:left后,浮动元素就会被包含到父元素里面,我们将这个特性成为浮动元素的延伸性。
浮动元素的延伸性是什么呢,我们可以将其理解为元素被设置成浮动后,该元素会进行延伸进而包含其所有浮动的子元素

    3. 定位流

  定位流也是脱离标准流的一种模式。它完全脱离标准流,不会对标准流有影响。    

2.浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素,且浮动元素的宽度是根据内容的宽度确定的。

看下面的一段代码:

XHTML

<body> <span class="test-float1">你好吧</span> <span class="test-float2">我是还是吧</span> </body>

1
2
3
4
<body>
    <span class="test-float1">你好吧</span>
    <span class="test-float2">我是还是吧</span>
</body>

然后分别对.test-float1和.test-float2应用样式,代码如下:

CSS

*{padding:0;margin:0px;} span{ background-color:#f73bd6; margin:0 0 0 10px; } .test-float1{ float:left; height:100px; width:20px; } .test-float2{ /*float:left;*/ height:100px; width:20px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{padding:0;margin:0px;}
        span{
            background-color:#f73bd6;
            margin:0 0 0 10px;
        }
        .test-float1{
            float:left;
            height:100px;
            width:20px;
        }
        .test-float2{
            /*float:left;*/
            height:100px;
            width:20px;
        }

效果如下:

金沙棋牌官方平台 23

由上面的代码我们可以得出一个结论,span作为一个行内元素本来是没有width和height属性的,但是当对行内元素使用float属性后,该元素具有了width和height属性

注意:

假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

看下面的一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestFloat</title> <style type="text/css"> body{ margin:0; } .item1, .item2, .item3, .item4{ width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0; } .item1{ float:right; } .item2{ /*float:left;*/ } </style> </head> <body> <div id="body-div"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestFloat</title>
    <style type="text/css">
        body{
            margin:0;
        }
 
        .item1, .item2, .item3, .item4{
            width:200px;
            height:100px;
            background-color:#d8f73b;
            margin:10px 0 0 0;
        }
        .item1{
            float:right;
        }
        .item2{
            /*float:left;*/
        }
 
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
    </div>
</body>
</html>

这个时候看到页面的结果有一个很明显的bug,如下图:

金沙棋牌官方平台 24

可以很明显的看到在浮动的item1和item2有一个间隔没有在一条水平线上。

这个时候就回到了我们开头的问题,我们给父级的div盒子添加overflow属性触发父级div的BFC。代码如下:

CSS

<style type="text/css"> body{ margin:0; } //触发父级元素的BFC #body-div{ overflow:hidden; } .item1, .item2, .item3, .item4{ width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0; } .item1{ float:right; } .item2{ /*float:left;*/ } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
        body{
            margin:0;
        }
        //触发父级元素的BFC
        #body-div{
            overflow:hidden;
        }
        .item1, .item2, .item3, .item4{
            width:200px;
            height:100px;
            background-color:#d8f73b;
            margin:10px 0 0 0;
        }
        .item1{
            float:right;
        }
        .item2{
            /*float:left;*/
        }
 
    </style>

效果如下图:

金沙棋牌官方平台 25

有关BFC的定义:

BFC(W3C CSS 2.1 规范中的一个概念)就是所谓的Block formatting contexts (块级格式化上下文)。创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC仍然属于文档中的普通流。

那么怎么触发BFC呢?

  1. float 除了none以外的值
  2. overflow 除了visible 以外的值(hidden,auto,scroll )
  3. display (table-cell,table-caption,inline-block)
  4. position(absolute,fixed)
  5. fieldset元素

注意:

display:table 本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。


fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息,直到HTML5标准里才出现。有些浏览器bugs(Webkit,Mozilla)提到过这个触发行为,但是没有任何官方声明。实际上,即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文,开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件,也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性,建议开发者们把这种支持当做实验性质的,更高版本的CSS可能会进一步规范这个。

BFC的特性:

1)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加。换句话说,如果这两个相邻的块框不属于同一个块级格式化上下文,那么它们的外边距就不会叠加。 2)块级格式化上下文不会重叠浮动元素 根据规定,一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元 素的外边距叠加。由于这个原因,当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用(Webkit和IE6在这点上有一个问题——可以看这 个测试用例)。 3)块级格式化上下文通常可以包含浮动 触发了BFC的话,就不会被float元素覆盖,当子元素全部浮动的时候也能够正确地包含了

深入研究浮动:

来看下面的一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:0;} #body-div{ background-color:#ffff99; border:1px solid #111111; padding:5px; } #body-div div{ padding:10px; margin:15px; background-color:#90baff; } #body-div p{ border:5px dashed #111111; background-color:#ff90ba; } .item1{ border:5px dashed #111111; /*float:left;*/ } .item2{ border:5px dashed #f73b4d; } .item3{ border:5px dashed #0000CD; } </style> </head> <body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> <p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:</p> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{margin:0;}
        #body-div{
            background-color:#ffff99;
            border:1px solid #111111;
            padding:5px;
        }
        #body-div div{
            padding:10px;
            margin:15px;
            background-color:#90baff;
        }
        #body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
        }
        .item1{
            border:5px dashed #111111;
            /*float:left;*/
        }
        .item2{
            border:5px dashed #f73b4d;
 
        }
        .item3{
            border:5px dashed #0000CD;
 
        }
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">Box-1</div>
        <div class="item2">Box-2</div>
        <div class="item3">Box-3</div>
        <p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:</p>
    </div>
</body>
</html>

显示效果如下图:

金沙棋牌官方平台 26

以Normal flow为基础

不管是Absolute positioning还是Float均以Normal flow作为定位基础,也就是说先假设有一个虚拟盒子以Normal flow进行定位,然后在这个基础上添加Float的特性并影响其他盒子的布局。而浮动定位对于盒子自身而言仅影响其在水平方向上的定位,因此对于inline-level box而言其垂直方向上的定位并没有发生变化,而对于block-level box而言因Collapsing margins的失效有可能会引起垂直方向上的移动。
金沙棋牌官方平台 27

XHTML

<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div> <div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div> <div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

1
2
3
<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div>
<div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div>
<div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

值得注意的是,浮动定位的虚拟盒子实际上是不占空间的。因此才有后续的浮动闭合和清除浮动的事。

浮动元素超出父级元素的padding

在前面提到的第一条规则:浮动元素的外边界不会超过父级元素的内边界。大部分情况下,我们见到的场景都是符合的。但是有一些特殊情况。
(1)负margin
我们将浮动元素的margin-left设置成负数。
HTML代码:

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="minus-margin"> 负margin-left </span> </p>

1
2
3
4
5
6
<p>
     在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
     <span class="minus-margin">
         负margin-left
     </span>
</p>

CSS代码:

CSS

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; } .minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; }
.minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

效果图

金沙棋牌官方平台 28

负maring的浮动元素

将margin-left设置成负数之后,浮动的子元素明显超出了父元素的内边界,这难道不是违反了第一条规则吗?
但仔细想想,这其实是合理的,因为默认情况下marign-left就是0,所以不会超出父元素的内边界,但是将其设置成负数之后,就相当于浮动元素覆盖了自己的内边界一样。
我们在从数学的角度来看看这个问题,这个例子中:
父元素的margin-left:50px,padding和border默认为0,即内边界所在距离浏览器左侧的位置为50px。
浮动的子元素默认情况下距离浏览器左侧的像素应该为50px,但是将其设置成margin-left:20px后,浏览器会进行计算:
50px+(-20px)margin+0border+0padding=30px。距离浏览器左侧更近,所以超出了父元素。

(2)浮动元素宽度大于父级元素宽度
如果我们将浮动元素的宽度设置大于父级元素,效果会如何呢?
元素左浮动,width大于父级元素
HTML代码

XHTML

<p> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前, <span class="big-width"> width大于父级元素 </span> </p>

1
2
3
4
5
6
<p>
     在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,
     <span class="big-width">
         width大于父级元素
     </span>
</p>

CSS代码

CSS

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; } .big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

效果图

金沙棋牌官方平台 29

大width的浮动元素

将浮动元素左浮动,并且宽度超出父级元素时,由于浮动元素宽度较大,它会超过父级元素的右内边界
如果将其设置成右浮动,情况又会怎么样呢?
金沙棋牌官方平台 30

大width的浮动元素

可以看到,设置成右浮动后,会超出父级元素的左内边界。

浮动(float)

我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要的一行上。

浮动 Float: left   right   none
 
你不得不必须知道详细的理解浮动:

  1.  浮动已经脱离的标准流。 (脱标)

      也就是说,浮动已经漂浮在标准流的上方。

  2. 因为我们的浮动是左右浮动,所以我们的块级元素都是左右排列。

2.1为Box-1设置浮动

CSS

.item1{ border:5px dashed #111111; float:left; }

1
2
3
4
.item1{
            border:5px dashed #111111;
            float:left;
        }

效果如下图:

金沙棋牌官方平台 31

可以看到标准流中的Box-2的文字在围绕着Box-1排列,而此时的Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。 因为此时的Box-1已经脱离了标准流,标准流中的Box-2会顶到原来Box-1的位置(也就是Box-2的左边框和Box-1的左边框重合)此时Box-2的文字会围绕着Box-1排列。

压榨line box

金沙棋牌官方平台 32
文字环绕很明显就是活生生地把文字向两边挤,为”大哥”留下个位置,而且小弟们不要走太远,必须时刻拥护着大哥。那大哥是如何圈住小弟们的呢?那得借助外力——line box。文字是以字形(glyph)的形式渲染,和它同一行的inline-level boxes均位于同一个line box中。而line box可谓是夹在containing block和浮动盒子之间勉强生存。
金沙棋牌官方平台 33

XHTML

<div style="overflow:hidden;line-height:1.5;background:#06F;"> <img src="john.png" style="float:left;margin:10px"/> These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”. </div>

1
2
3
4
<div style="overflow:hidden;line-height:1.5;background:#06F;">
<img src="john.png" style="float:left;margin:10px"/>
These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”.
</div>

若line box的宽度不足以容纳glyph和inline-level boxes时,会在下方产生N个新的line boxes并在必要时拆分inline-level boxes,然后将glyph和inline-level boxes分布到各行的line boxes当中。

重叠问题

重叠问题是指两个元素再同一个位置,会出现上下重叠的问题。浮动元素如果和普通文档流发生重叠会怎么样呢?
首先浮动元素要怎么样才会发生重叠呢,设置其margin-top为负数即可。我们看看例子:
HTML代码:

XHTML

<p> <span> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </span> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
         <span>
             在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
         </span>
         <span class="overlay">
             浮动元素重叠
         </span>
     </p>

CSS代码

XHTML

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; } .overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果图如下:

金沙棋牌官方平台 34

浮动元素的重叠问题

如果浮动元素不设置负margin时,是这样的
金沙棋牌官方平台 35

浮动元素的重叠问题

在这个例子中,可以看到p中正常流元素span的内容会显示在浮动元素上面。
我们给设置span设置背景图片试试,效果如下:
金沙棋牌官方平台 36

浮动元素的重叠问题:有背景图

元素设置背景后,重叠的部分还是会显示背景

如果是span标签换成div标签会怎么样呢?
HTML代码:

XHTML

<p> <div style="background-image:url(../images/banner1.jpg)"> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </div> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
      <div style="background-image:url(../images/banner1.jpg)">
          在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
      </div>
      <span class="overlay">
          浮动元素重叠
      </span>
  </p>

效果图

金沙棋牌官方平台 37

浮动元素的重叠问题:块级元素有背景图

这种情况下,重叠的部分不会显示背景图片。

总结一下这两种情况的区别:
1、行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上

清除浮动(clear)

如果想要我们做的网页浏览器兼容性好,首先要保证的是,我们写的代码要足够标准。

清除浮动的原因:  因为浮动会影响标准流。所以我要根据不同情况来清除浮动。

Clear:both;

2.2为Box-2设置浮动

CSS

.item2{ border:5px dashed #f73b4d; float:left; }

1
2
3
4
.item2{
            border:5px dashed #f73b4d;
            float:left;
        }

效果如下图:

金沙棋牌官方平台 38

这是很容易看出Box-3和Box-1的左边框重合。Box-3的文字围绕Box-2,并且Box-1和Box-2之间的空白是两者之间的margin产生的。

脚踩block-level box

相对line box,block-level box就显得不屈不挠了。width:auto时其宽度始终保持占满containing block宽度的态度。但位于同一个stacking context中的浮动定位的盒子虽然和常规流中的盒子拥有相同的z-index(都是auto),但浮动定位的盒子拥有额外的优先级,导致它总位于常规流中的盒子之上。(关于分层显示的内容可参考《CSS魔法堂:你真的理解z-index吗?》)
金沙棋牌官方平台 39

XHTML

<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div> <div style="background:#06f;width:200px;height:100px;"></div>

1
2
<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div>
<div style="background:#06f;width:200px;height:100px;"></div>

clear属性

有的时候,我们不希望一些元素会被旁边的浮动元素影响到,这个时候就需要用到clear属性了。
clear属性:确保当前元素的左右两侧不会有浮动元素。
我们举个例子进行说明:
假设有3个浮动的div如下所示:
金沙棋牌官方平台 40

3个浮动元素

它的HTML代码和CSS代码如下
HTML代码:

XHTML

<div class="box"> <div class="float">浮动元素1</div> <div class="float">浮动元素2</div> <div class="float">浮动元素3</div> </div>

1
2
3
4
5
<div class="box">
         <div class="float">浮动元素1</div>
         <div class="float">浮动元素2</div>
         <div class="float">浮动元素3</div>
     </div>

CSS代码:

CSS

.float { float: left; width: 150px; background: #0094ff; border: 1px solid red; margin-left: 5px; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; }

1
2
3
4
  .float { float: left; width: 150px; background: #0094ff; border: 1px solid red; margin-left: 5px; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }

假设有我们有想让第二个浮动元素另起一行进行浮动,那该怎么做呢?

根据clear属性的定义:确保当前元素的左右两侧不会有浮动元素。
我们对第一个浮动元素添加clear:right保证其右侧不会有浮动元素。修改HTML代码如下:

XHTML

<div class="box"> <div class="float cr">浮动元素1</div> <div class="float">浮动元素2</div> <div class="float">浮动元素3</div> </div>

1
2
3
4
5
<div class="box">
     <div class="float cr">浮动元素1</div>
     <div class="float">浮动元素2</div>
     <div class="float">浮动元素3</div>
</div>

查看效果发现没有什么变化

金沙棋牌官方平台 41

第1个元素清除浮动

这种方法是错误的!!

那我们试试给第二个元素添加clear:left保证其左侧不会出现浮动元素。修改HTML代码如下:

XHTML

<div class="box"> <div class="float">浮动元素1</div> <div class="float cl">浮动元素2</div> <div class="float">浮动元素3</div> </div>

1
2
3
4
5
<div class="box">
     <div class="float">浮动元素1</div>
     <div class="float cl">浮动元素2</div>
     <div class="float">浮动元素3</div>
</div>

金沙棋牌官方平台 42

第2个元素清除浮动

可以看到这次clear属性有效果了。

同样是设置clear属性,为什么会出现这样的结果呢?
使用clear属性的时候要记住:clear只对元素本身的布局起作用
在前面的例子中,第一个浮动元素添加了clear属性,它并不会影响到其他元素的布局,只会影响自己,所以第二个浮动元素并不会另起一行。
而第二个浮动元素设置了clear后,我们可以看到clear作用于自己,所以元素另起一行。

1.1.1额外标签法

W3c推荐,再最后一个浮动的盒子的后面,新添加一个标签。然后他可以清除浮动。
 
 金沙棋牌官方平台 43

优点:  通俗好理解
缺点:  增加了太多的标签

2.3为Box-3设置浮动

CSS

.item3{ border:5px dashed #0000CD; float:left; }

1
2
3
4
5
    .item3{
            border:5px dashed #0000CD;
            float:left;
 
        }

效果如下图:

金沙棋牌官方平台 44

这个时候可以很明显的看出三个浮动的盒子(都脱离文档流)都被P标签的盒子所包围,并且被文字环绕。

通过创建BFC翻身做主人

同样是盒子,为啥你就可以在我上面呢?你有Float罩着,我也找弄个新的BFC来跟你抗衡。我们知道通过float:left|rightposition:absolute|fixeddisplay:inline-block|table-cell|table|table-captionoverflow:auto|scroll|hidden均可让盒子产生新的BFC。而产生BFC的盒子间天生排斥彼此。(但可通过后天的努力position:relative让他们又互有交集^_^)
那现在的问题是采用Normal flow定位模式的会产生新的BFC的盒子到底是紧跟在Float定位盒子的后面,还是另起一行呢?答案是两者都有可能,具体看剩余的宽度是否足以容纳该盒子。其实就是如同设置父容器产生BFC,而该盒子采用Float定位模式。不信,你看

XHTML

<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div> <div style="background:#06f;width:200px;height:100px;overflow:hidden;"></div>

1
2
<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div>
<div style="background:#06f;width:200px;height:100px;overflow:hidden;"></div>

金沙棋牌官方平台 45

清除浮动

清除浮动是一个经常提到的东西,首先我们要理解使用浮动会带来什么问题,以及为什么要清除浮动。
我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动。
清除浮动有很多方法,下面我们一一说明每一种方法。

对于IE浏览器来说,要清除浮动带来的问题,只需要触发器hasLayout就可以,直接设置样式zoom:1就可以触发。关于hasLayout的知识,这里暂不详述,以后我们专门来讲讲这个东西,感兴趣的同学可以先查查相关资料。

对于非IE浏览器,主要有下面几种方法:

1.1.2Overflow 清除浮动

使用方法:  是浮动的大盒子(父级标签)再样式里面加: overflow:hidden;为了照顾ie6,我们再加上 zoom:1;
金沙棋牌官方平台 46

优点: 代码书写方便
缺点: 如果这个父盒子,里面还有定位,就会引起麻烦。

2.4设置Box-3浮动的方向

CSS

.item3{ border:5px dashed #0000CD; float:right; }

1
2
3
4
5
.item3{
            border:5px dashed #0000CD;
            float:right;
 
        }

效果如下图:

金沙棋牌官方平台 47

这个时候当我把浏览器窗口的宽度逐渐的缩小到不能容纳三个div宽度的时候,会有什么效果呢?如下图:

金沙棋牌官方平台 48

注意:

这种效果我只在IE浏览器(<=IE8的浏览器中出现更怪异的情况)里面测试的时候可以小到让Box-3换行。

在mac下得chrome,firefox和safari当窗口缩小到一定的宽度的时候,就无法在缩小宽度。无法出现Box-3被挤到下一行的情况。

如下图:

金沙棋牌官方平台 49

这时如果我们设置item2右浮动item3左浮动当我缩小浏览器窗口的时候,会出现如下的情况(mac下chrome和safari中仍旧是之上的情况,缩小到一定宽度无法再缩小)。

金沙棋牌官方平台 50

由此我们可以得出一个结论:

当浮动的元素在一行无法显示完全时,元素会按照普通流的顺序(Dom排列顺序)被挤到下一行。

是”浮动闭合”还是”清除浮动”?

我想各位都看过各种版本的clearfix实现,而最简单粗暴的方式就是添加一个<div style="clear:both"></div>来清除浮动。我还听过另一个名称——”浮动闭合”,那到底两者有什么区别呢?在作区分之前我们先要明确问题的本身。
对于height:auto的容器而言,我们希望它能恰好包裹着所有子元素,但不幸的是采用浮动定位模式的子元素将不纳入父容器的高度计算当中,那就会出现子元素戳穿父容器的风险。
从之前的内容我们了解到文字和inline-level boxes会环绕Float定位的盒子,而block-level box则被它踩在脚下。但现在希望后续盒子不再与Float定位的盒子有任何瓜葛。
面对这两种需求,我们分别得出”浮动闭合”和”清除浮动”两套方案。

增加额外的div

这是最简单直接的方法,哪里有浮动元素,就在其父级元素后增加一个

XHTML

<div style="clear:both"></div>

1
<div style="clear:both"></div>

这样就会清除浮动元素带来的问题。

优点:简单直接,初学者常常使用的方法,也易于理解
缺点:增加额外的无意义标签,不利于语义化,每次清除都要添加额外的空标签,造成浪费

1.1.3 After伪类清除浮动

.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}  

<div class="box clearfix">  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow清除浮动</title>
<style type="text/css">
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}
.box{width:400px;}

.one,.two{width:200px; height:100px; background-color:#093; float:left;}
.two{background-color:#39F;}
.test{width:400px; height:120px; background-color:#900;}
 
</style>
</head>
<body>
<div class="box clearfix">
<div class="one"></div>
    <div class="two"></div>
</div>
<div class="test"></div>
</body>
</html>

 
   优点: 一次写完,后面直接调用就可以了
   缺点: 声明麻烦写   

2.5浮动的边界

增加Box-1的高度,当缩小浏览器的宽度的时候,会出现如下的现象:

金沙棋牌官方平台 51

主要是因为这个时候Box-3的边缘被Box-1的边缘卡住的缘故。

如下图红色的地方会有三个margin值:

金沙棋牌官方平台 52

浮动闭合

就是让height:auto的父容器包裹所有子元素,包括Float定位的子元素。方式很简单,就是好让父容器产生BFC。

父级元素添加overflow:hidden

这个方法的关键在于触发了BFC,BFC是CSS中的难点之一,我们以后专门来学习这个概念。现在只需要知道它可以清除浮动带来的影响。

CSS

.clearfix{overflow:hidden;zoom:1}

1
.clearfix{overflow:hidden;zoom:1}

优点:代码量少,没有额外的标签

缺点:如果子元素超出父元素的范围,会造成超出的部分被隐藏

1.1.4After before伪类清除浮动

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顾ie6*/
zoom:1;
}
使用:
<div class="box clearfix">

  第四种,是大部分大型网站常用的,比如新浪 淘宝 的清除浮动的效果。

 

以上希望对大家有所帮助。

小强零零壹和大家一起分享。

2.6取消浮动的影响

使用CSS属性Clear,它有三个值left,right,both。

如我们取消p元素左右两侧的浮动:

代码如下:

CSS

#body-div p{ border:5px dashed #111111; background-color:#ff90ba; clear:both; }

1
2
3
4
5
#body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
            clear:both;
        }

效果如下: 金沙棋牌官方平台 53

清除浮动

就是为浮动影响的范围划边界。方式也很简单,就是以一个clear:left|right|both的盒子作为边界即可,其实就是引入空隙(clearance)。
首先clear属性仅对block-level box有效clear:left表示盒子的margin-left-edge不与浮动盒子接触,而clear:right表示盒子的margin-right-edage不与浮动盒子接触,clear:both自然是左右两条margin-edge均不与浮动盒子接触啦。有点虚,直接看疗效吧!

XHTML

<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div> <div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div> <div style="float:right;width:200px;height:50px;background:#06F;">float:right</div> <div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

1
2
3
4
<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div>
<div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div>
<div style="float:right;width:200px;height:50px;background:#06F;">float:right</div>
<div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

金沙棋牌官方平台 54

简单地说就是float:leftclear:left来清除,float:rightclear:right来清除。而我们会发现一个怪异的现象,那就是设置clear:left|right|both的盒子的border top edge紧接着Float定位盒子的margin bottom edge,其实这是clearance来作祟。当设置clear:left|right|both的盒子A的border top edge与Float定位盒子B的margin box重叠时,那么就会在A的margin box和border top edge之间引入clearance,恰好让A的的border top edge恰好不与B的margin bottom edge重叠。

XHTML

<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div> <div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

1
2
<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div>
<div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

金沙棋牌官方平台 55

after伪元素

after表示子元素的后面,通过它可以设置一个具有clear的元素,然后将其隐藏

CSS

clearfix:{ zoom:1 } clearfix:after{ display:block; content:''; clear:both; height:0; visibility:hidden; }

1
2
3
4
5
6
clearfix:{
     zoom:1
}
clearfix:after{
     display:block; content:''; clear:both; height:0; visibility:hidden;
}

这种方法的远离和第一个方法一样,就是生成一个元素来清除浮动,只是这个元素是“假的”。

优点:没有额外标签,综合起来算是比较好的方法
缺点:稍显复杂,但是理解其原理后也挺简单的
推荐使用这种方法。

CSS中的Float(清除浮动)问题

不知道怎么说清楚..举例来说明吧...~
有以下代码~
<div id="a">a</div>
<div id="b">b</div>
在元素的自然流下a层将和b层一上一下
加入我们想实现a b层并列的效果那么就需要将a b 浮动~
但是假如下面还有一个C层
由于a b层浮动了~c层也将环绕在a b层周围~
但是如果我们想让c层在a b层下面出现~那就需要清理浮动~恢复页面元素的自然流~浮动并不是清理自身的浮动的效果~而是清理上面接触到的浮动元素的浮动~使浮动元素后面的元素不接受它们的浮动~按照正常的元素流进行布局....
因此清理浮动和浮动并不矛盾~

清理浮动有很多方法~
可以用clear:(left right both)~个人比较喜欢用overflow来清理浮动~
你可以搜一下一篇叫 清理浮动全家 的文章~~比较全面的介绍了各种清理浮动的方法~  

2.7浮动的影响

当然浮动对父级元素也会带来影响,比如说伟大的“塌陷”,看代码:

CSS

<style type="text/css"> body{margin:0;} #body-div{ background-color:#ffff99; border:1px solid #111111; padding:5px; } #body-div div{ padding:10px; margin:15px; background-color:#90baff; } #body-div p{ border:5px dashed #111111; background-color:#ff90ba; clear:both; } .item1{ border:5px dashed #111111; float:left; height:30px; } .item2{ border:5px dashed #f73b4d; float:left; } .item3{ border:5px dashed #0000CD; float:left; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
        body{margin:0;}
        #body-div{
            background-color:#ffff99;
            border:1px solid #111111;
            padding:5px;
        }
        #body-div div{
            padding:10px;
            margin:15px;
            background-color:#90baff;
        }
        #body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
            clear:both;
        }
        .item1{
            border:5px dashed #111111;
            float:left;
            height:30px;
        }
        .item2{
            border:5px dashed #f73b4d;
            float:left;
        }
        .item3{
            border:5px dashed #0000CD;
            float:left;
 
        }
    </style>

效果如下图:

金沙棋牌官方平台 56

所有子元素的浮动不会将父级元素的高度撑开。

那么怎么解决这个问题呢?

一个很古老的办法就是在所有子元素的末尾添加一个空的div,并且设置它的clear:both。 看代码如下:

CSS

#body-div .clear-float{ clear:both; border:0; padding:0; margin:0; }

1
2
3
4
5
6
#body-div  .clear-float{
            clear:both;
            border:0;
            padding:0;
            margin:0;
        }

效果如下:

金沙棋牌官方平台 57

其实我在IE各版本浏览器和非IE浏览器中测试的效果都是如上面的效果可意很容易的发现父级的div盒子并没有被完全的撑开。

不过有大神已经研究出了clearfix的写法,可以达到最合理的效果,主要目的就是触发父级盒子自身的BFC。

版本一:

CSS

.clearfix:after { content: "200B"; display: block; height: 0; clear: both; } .clearfix { *zoom: 1;/*IE/7/6*/ }

1
2
3
4
5
6
7
8
9
10
    .clearfix:after {
        content: "200B";
        display: block;
        height: 0;
        clear: both;
    }
 
    .clearfix {
        *zoom: 1;/*IE/7/6*/
    }

> content:”200B”;这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。 **版本二:**

CSS

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

1
2
3
4
5
6
7
8
9
10
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
*zoom: 1;        /*IE/7/6 */
}

经过测试在IE的各个版本的浏览器中和非IE浏览器都能够正常的得到结果。

金沙棋牌官方平台 58

.clearfix方案

不管是浮动闭合也好,清除浮动也罢,我们的目的往往是两者结合——Float定位的范围与Normal flow定位的范围分明,且采用Normal flow的父容器包裹所有子元素。那么可归结为Normal flow的父容器包裹所有子元素。因此得到如下的HTML Markup

XHTML

<div class="container clearfix"> <!-- Float定位的范围 --> </div> <!-- Normal flow定位的范围 -->

1
2
3
4
<div class="container clearfix">
   <!-- Float定位的范围 -->
</div>
<!-- Normal flow定位的范围 -->

而具体的方案如下:
方案1

CSS

.clearfix::after{ content: "."; display: block; clear: both; line-height: 0; visibility: hidden; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
10
.clearfix::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

伪元素after表示创建一个display:block,innerText是content属性值的元素作为该元素的最后一个子元素。注意content属性值不能为空白,否则无法清除浮动。
方案2

CSS

.clearfix::after{ content: "u200B"; /*通过零宽空白字符,省略visibility属性*/ display: block; clear: both; line-height: 0; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
.clearfix::after{
  content: "u200B"; /*通过零宽空白字符,省略visibility属性*/
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

注意:若页面不是采用UTF-8编码方式,那么u200B表示的将不是零宽空白字符,从而导致方案2出问题。
方案3
由Nicolas Gallagher大湿提出的

CSS

.clearfix::before, .clearfix::after{ content: ""; display:table; } .clearfix::after{ clear: both; } .clearfix{ *zoom: 1; /*for IE5.5/6/7*/ }

1
2
3
4
5
6
7
8
9
10
.clearfix::before, .clearfix::after{
  content: "";
  display:table;
}
.clearfix::after{
  clear: both;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

这里有2个奇妙的地方:

  1. 通过display:table让即使content为空白时,也能独占据一行,且高度为0;(原理是display:table会生成一个block-level box包裹着伪元素after)
  2. 通过伪元素before消除父容器margin-top与第一个Normal flow的子元素的margin-top产生margin collapsing效果。

float的应用

说了这么多float的原理和可能造成的问题,接下来我们就要谈谈float的应用。

这句div+css清除浮动是什?怎使用?

如果父div是float:left,而子div没有float就会产生父div没有高度问题,子div无法撑开父div,加入清除浮动,子div就可以撑开父div,不知你明白了么,没明白找我问下  

CSS浮动详解 清除浮动的方法,floatcss 我们把网页的常用的布局格式分为以下三种: 1.标准流。 所谓的标准流就是,行内...

推荐阅读:

打赏支持我写出更多好文章,谢谢!

打赏作者

浮动真的是定位模式的一员吗?

我们可以通过position属性来设置Normal flow或Absoluting positioning,但却要通过float属性来设置Float,这让我一度怀疑Float到底是不是定位模式的一员呢?
我是这样理解的,Normal flow(包括Relative positioning)与Absoluting positioning是非我即你的关系,而Float和Relative positioning则是可叠加影响定位效果的关系,显然必须另设一个属性来设置更恰当。

文字环绕效果

float最初的应用就是文字环绕效果,这对图文并茂的文章很有用。我们简单的距离说明一下:
HTML代码

XHTML

<div class="box"> <img src="1.jpg" class="float" /> 我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字 </div>

1
2
3
4
<div class="box">
         <img src="1.jpg" class="float" />
         我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字
     </div>

CSS代码:

CSS

.box { background: #00ff90; padding: 10px; width: 500px; } .float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }  
.float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

效果图

金沙棋牌官方平台 59

文字环绕效果

这样很轻松的实现了文字环绕效果。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

金沙棋牌官方平台 60 金沙棋牌官方平台 61

4 赞 11 收藏 评论

期待更美的文字环绕

有没有发现通过float:left|right我们仅能得到要么图片靠左要么图片靠右的文字环绕效果,那如果我们希望得到如下的四周环绕的效果呢?
金沙棋牌官方平台 62
虽然已有案例是通过absolute positioning模拟出类似的效果,但布局排版固定导致无法适应大部分场景。如果有个float:both属性值那该多好啊!另外大家是否觉得以下的环绕效果更有艺术范呢?
金沙棋牌官方平台 63
听说通过CSS3的shapes特性可以实现四周环绕和上面非四四方方的环绕效果,日后好好研究研究!
2016/04/19补充-参考《CSS网站布局实录-基于Web标准的网站设计指南(第2版)》的5.2.2 不规则文字环绕
金沙棋牌官方平台 64

XHTML

<style type="text/css"> .article{ font-size: 14px; line-height: 1.5; text-align: justify; } .figure{ position: absolute; z-index: -1; } .figure-shape{ margin: 0; padding: 0; } .figure-shape li{ list-style-type:none; height: 1.5em; float: left; clear: left; } .figure-shape li:nth-child(1){ width: 150px; } .figure-shape li:nth-child(2){ width: 180px; } .figure-shape li:nth-child(3){ width: 180px; } .figure-shape li:nth-child(4){ width: 160px; } .figure-shape li:nth-child(5){ width: 148px; } .figure-shape li:nth-child(6){ width: 150px; } .figure-shape li:nth-child(7){ width: 148px; } .figure-shape li:nth-child(8){ width: 144px; } .figure-shape li:nth-child(9){ width: 136px; } </style> <div class="article"> <img src="./beyonce.jpg" class="figure"/> <ul class="figure-shape"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul> 初中时候语文老师说我会是个写作天才,因为我写的东西足够真实,取材身边,造句简单,用语文书垫桌脚的同时翻烂了韩寒的1988,那时督促我已经成为她的习惯。时至今日再次遇见语文老师时候我惭愧的告诉她我已经不写文了,也没有像她说的那样成为一个天才,我只能微微一笑告诉她我至少还没停下笔。 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style type="text/css">
.article{
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
.figure{
  position: absolute;
  z-index: -1;
}
.figure-shape{
  margin: 0;
  padding: 0;
}
.figure-shape li{
  list-style-type:none;
  height: 1.5em;
 
  float: left;
  clear: left;
}
.figure-shape li:nth-child(1){
  width: 150px;
}
.figure-shape li:nth-child(2){
  width: 180px;
}
.figure-shape li:nth-child(3){
  width: 180px;
}
.figure-shape li:nth-child(4){
  width: 160px;
}
.figure-shape li:nth-child(5){
  width: 148px;
}
.figure-shape li:nth-child(6){
  width: 150px;
}
.figure-shape li:nth-child(7){
  width: 148px;
}
.figure-shape li:nth-child(8){
  width: 144px;
}
.figure-shape li:nth-child(9){
  width: 136px;
}
</style>
<div class="article">
<img src="./beyonce.jpg" class="figure"/>
<ul class="figure-shape"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
初中时候语文老师说我会是个写作天才,因为我写的东西足够真实,取材身边,造句简单,用语文书垫桌脚的同时翻烂了韩寒的1988,那时督促我已经成为她的习惯。时至今日再次遇见语文老师时候我惭愧的告诉她我已经不写文了,也没有像她说的那样成为一个天才,我只能微微一笑告诉她我至少还没停下笔。
</div>

横向菜单排列

在之前提到的display:inline的文章详解CSS display:inline-block的应用中,我们提到了横向排列菜单的实现,最早是利用float属性来实现的,它可以很简单的实现横向菜单的效果。
HTML代码:

XHTML

<ul class="menu clearfix"> <li>首页</li> <li>政治</li> <li>娱乐</li> <li>体育</li> <li>游戏</li> </ul>

1
2
3
4
5
6
7
<ul class="menu clearfix">
     <li>首页</li>
     <li>政治</li>
     <li>娱乐</li>
     <li>体育</li>
     <li>游戏</li>
</ul>

CSS代码:

CSS

.clearfix: { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; } .menu { background: #0094ff; width: 500px; } .menu li { float: left; width: 100px; list-style-type: none; }

1
2
3
4
.clearfix: { zoom: 1; }
     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
.menu { background: #0094ff; width: 500px; }
     .menu li { float: left; width: 100px; list-style-type: none; }

效果图:

金沙棋牌官方平台 65

横向菜单

这种方式可以很轻松的实现横向菜单效果,但需要注意的是要注意清除浮动,推荐使用display:inline-block来实现

关于作者:zhiqiang21

金沙棋牌官方平台 66

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

金沙棋牌官方平台 67

总结

重构了几次总算写完了,想写得清楚而又不哆嗦真心不易,继续努力:)

布局

float最经常使用的场景就是布局。使用float可以很简单的实现布局,而且易于理解。下面我们来实现一个三栏两列的固定布局。
HTML代码:

XHTML

<div class="header"> 我是头部 </div> <div class="content clearfix"> <div class="side">左侧</div> <div class="main"> 右侧 </div> </div> <div class="footer"> 我是底部 </div>

1
2
3
4
5
6
7
8
9
10
11
12
  <div class="header">
      我是头部
  </div>
  <div class="content clearfix">
      <div class="side">左侧</div>
      <div class="main">
          右侧
      </div>
  </div>
<div class="footer">
     我是底部
</div>

CSS代码

CSS

.clearfix: { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; } .header, .footer { height: 50px; background: #0094ff; text-align: center; } .content { margin: 0 auto; width: 1000px; background: #000000; } .side { float: left; height: 500px; width: 280px; background: #ff006e; } .main { float: right; height: 500px; width: 700px; background: #fbcfcf; }

1
2
3
4
5
6
.clearfix: { zoom: 1; }
     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
.header, .footer { height: 50px; background: #0094ff; text-align: center; }
.content { margin: 0 auto; width: 1000px; background: #000000; }
.side { float: left; height: 500px; width: 280px; background: #ff006e; }
.main { float: right; height: 500px; width: 700px; background: #fbcfcf; }

效果图

金沙棋牌官方平台 68

三栏两列布局

这就是一个很常见的布局,要注意的就是清除浮动的问题。

float常见的应用大概是这几种,当然它存在着更多的应用等待着大家去挖掘,欢迎交流!!

回到顶部

感谢

KB011: 浮动(Floats)
KB009: CSS 定位体系概述
CS001: 清理浮动的几种方法以及对应规范说明
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)

CS001: 清理浮动的几种方法以及对应规范说明
Faking ‘float: center’ with Pseudo Elements
说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性
那些年我们一起清除过的浮动

打赏支持我写出更多好文章,谢谢!

打赏作者

总结

float属性是一个频繁用到的属性,要用好它就要理解它的特性,否则容易云里雾里搞不清楚状况。关于float,最重要的是要理解下面几点:
1.float会造成元素脱离文档流
2.float影响元素的几个规则
3.浮动带来的问题以及如何清除浮动

2 赞 9 收藏 评论

金沙棋牌官方平台 69

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

金沙棋牌官方平台 70 金沙棋牌官方平台 71

1 赞 6 收藏 2 评论

关于作者:^-^肥仔John

金沙棋牌官方平台 72

偏前端的临栈工程师 个人主页 · 我的文章 · 5 ·    

金沙棋牌官方平台 73

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:说说Float那个被埋没的志向,清除浮动的方法

关键词:

上一篇:Async/Await替代Promise的6个理由

下一篇:没有了