精华内容
下载资源
问答
  • 1.解释一下display的几个常用属性值,inline , block, inline-blockinline:使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,width的值,大小由...

    1.解释一下display的几个常用的属性值,inline , block, inline-block

    • inline:
      1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
      2. 不能更改元素的height,width的值,大小由内容撑开. 
      3. 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行.
    • block:
      1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
      2. 能够改变元素的height,width的值. 
      3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
    •  inline-block:
      1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
      2. 用通俗的话讲,就是不独占一行的块级元素。如图:

    图一:

    图二:

    两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。

     

    2.inline-block布局 vs 浮动布局

        a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

        b.相同之处:能在某程度上达到一样的效果

      我们先来看看这两种布局:
    图一:display:inline-block

    图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:

    >>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)

      c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
    图三: 

    图四: 

    >>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。

     

    3.inline-block存在的小问题:

      a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

     

      b.去除空隙的方法:
      1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙
      现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的
    图一:

     

      c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
      在ie6/7下:
      对于行内元素直接使用{dislplay:inline-block;}
      对于块级元素:需添加{display:inline;zoom:1;}

     

    4.总结:

      display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:
      a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
      b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。

    展开全文
  • 详解CSS float属性

    万次阅读 2016-06-08 19:42:03
    转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS  | 5条评论 本文地址:...CSS中的float属性是一频繁用到的属性,对于初学者来说,如

    转自:http://luopq.com/2015/11/08/CSS-float/

    \详解CSS float属性

    本文地址:http://luopq.com/2015/11/08/CSS-float/,转载请注明

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

    基础知识

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

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

    CSS代码:

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

    效果图
    float基本效果

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

    float的详细细节

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

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

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

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

    CSS代码

    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; }
    

    效果图
    float规则一


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

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

    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>
    

    效果图如下:
    float规则二

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

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

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

    CSS代码

    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; }
    

    效果图
    float规则三情况1

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

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

    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; }
    

    效果图
    float规则三情况2

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

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

    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代码

    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; }
    

    效果图
    float规则四


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

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

    6.浮动元素会尽可能地向顶端对齐、向左或向右对齐
    在满足其他规则下,浮动元素会尽量向顶端对齐、向左或向右对齐,在第4条规则中的例子,浮动元素会尽可能靠近不浮动的p元素,左侧对齐
    float规则六

    float特殊情况

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

    浮动元素的延伸性

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

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

    CSS代码

    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; }
    

    效果图
    浮动元素高度大于父级元素

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

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

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

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

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

    CSS代码:

    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; }
    

    效果图
    负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代码

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

    CSS代码

    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; }
    

    效果图
    大width的浮动元素

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


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

    重叠问题

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

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

    CSS代码

    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; }
    

    效果图如下:
    浮动元素的重叠问题


    如果浮动元素不设置负margin时,是这样的
    浮动元素的重叠问题
    浮动元素的重叠问题

    在这个例子中,可以看到p中正常流元素span的内容会显示在浮动元素上面。
    我们给设置span设置背景图片试试,效果如下:
    浮动元素的重叠问题:有背景图

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

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

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

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


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

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

    clear属性

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

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

    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代码:

    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代码如下:

    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>
    

    查看效果发现没有什么变化
    第1个元素清除浮动

    这种方法是错误的!!

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

    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>
    

    第2个元素清除浮动


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

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

    清除浮动

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

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

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

    增加额外的div

    这是最简单直接的方法,哪里有浮动元素,就在其父级元素的内容中增加一个(作为最后一个子元素)

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

    这样就会清除浮动元素带来的问题。
    优点:简单直接,初学者常常使用的方法,也易于理解
    缺点:增加额外的无意义标签,不利于语义化,每次清除都要添加额外的空标签,造成浪费

    父级元素添加overflow:hidden

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

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

    优点:代码量少,没有额外的标签
    缺点:如果子元素超出父元素的范围,会造成超出的部分被隐藏

    after伪元素

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

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

    这种方法的原理和第一个方法一样,就是生成一个元素来清除浮动,只是这个元素是“假的”。
    优点:没有额外标签,综合起来算是比较好的方法
    缺点:稍显复杂,但是理解其原理后也挺简单的
    推荐使用这种方法。

    float的应用

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

    文字环绕效果

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

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

    CSS代码:

    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;}
    

    效果图
    文字环绕效果

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

    横向菜单排列

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

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

    CSS代码:

    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; }
    

    效果图:
    横向菜单


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

    布局

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

    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代码

    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; }
    

    效果图
    三栏两列布局


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

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

    总结

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

    展开全文
  • 前端---HTML5中float属性

    千次阅读 多人点赞 2018-09-21 13:19:46
    相信大家许多人在刚开始做页面布局中使用float属性无法把握它产生的效果,尤其是在多div共同放置在一容器中,因为float属性设置而往往产生自己不想要的结果.于是在这里给大家说说float属性到底该如何使用. float:...

    相信大家许多人在刚开始做页面布局中使用float属性无法把握它产生的效果,尤其是在多个div共同放置在一个容器中,因为float属性设置而往往产生自己不想要的结果.于是在这里给大家说说float属性到底该如何使用.


    • float:该属性控制目标HTML元素是否浮动以及如何浮动.当通过该属性设置某个元素浮动后,该元素将被当作block类型的盒模型处理,即相当于display属性被设置为block.也就是说,即使为浮动元素的display设置了其他属性值,该属性值依然是block.浮动HTML元素将会漂浮紧紧跟随它的前一个元素,直到遇到边框/内填充/外边距/或block类型的盒模型元素为止.

     

    float属性可以设置两个属性值,分别是left属性值right属性值:

    • left属性值,设定方式为:
    float:left;

    设定该属性可以使设定该属性的<div...>(其他元素也可以),向上浮上一层后靠左排列(可能这句话读者不太明白,在之后的代码演示中会让大家完全理解这句话的意思) .

    • float属性值,设定方式为:
    float:right;

    设定该属性可以使设定该属性的<div...>(其他元素也可以),向上浮上一层后靠右排列(可能这句话读者不太明白,在之后的代码演示中会让大家完全理解这句话的意思) .


        当容器中有多个div时设置float属性会产生什么结果在这里我们用代码示范操作一下:

    <html>
    	<head>
    	</head>
    	<body>
    		<div style="width:60px;height:60px;background-color:black;"></div>
    		<div style="width:120px;height:200px;background-color:pink"></div>
    		<div style="width:100px;height:100px;background-color:green"></div>
    	</body>
    </html>

             上图是我们定义了三个不同大小的div容器,三个div都没有设置float属性,我们来看看会产生什么结果:

            通过上图可以发现三个div容器因为没有设置float属性,所以三个div容器竖着排列,并不一行排放,但是在日常的页面设计中我们有时需要将多个div放在一行显示,这时就需要设置float属性来完成操作.


    •        接下来,我们对黑色的div进行定义float:left;属性,看看会有什么改变:
    		<div style="width:60px;height:60px;background-color:black;float:left;"></div>

     

           通过上图我们可以发现粉红色的div与黑色的div重叠在了一起,出现这种情况的原因是什么呢?这时我们再回头看前文中介绍float属性时所说的一句话 "向上浮上一层后靠左排列"     我们再通过该图来理解理解这句话,当黑色的div设置float属性后,黑色div容器向上浮动一层(一个网页是分好多层次结构的,并不是我们单一看到的平面结构,一个网页可以拥有多个平面层,类似于三维立体的表示,只不过在我们日常浏览中只能看到最上面一层,类似于一个圆锥,去求它的俯视图一样.),然后靠左对齐.当黑色的div容器离开共有的同一平面时,粉色的div和绿色的div独占一层,因为这两个div并没有设置float属性所以就继续竖着排列.


             在最后,我们试着将粉色的div也设置成float:left:属性后,看看有什么变化:

    		<div style="width:120px;height:200px;background-color:pink;float:left;"></div>

                  我们可以看到因为粉色的div设置了float属性向上漂浮一层后,与黑色的div处于同一平面,并与黑色的div左对齐,但因为绿色的div并没有设置float属性与其他两个div并没有在同一平面,并且同黑色的div产生了重叠.


    •            最后,关于float操作能引起的现象仍有许多,相信通过对以上float属性的掌握,大家可以以此类推出出现其他现象的原因,从而修正自己的代码,实现自己想要的结果.
    展开全文
  • 对于text-align的center属性有如下特点: 1、将text-align的center应用在一容器上,它只是针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器...

    对于text-align的center属性有如下特点:

    1、将text-align的center应用在一个容器上,它只是针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器不会居中


    2、text-align具有向下传递性,会不断向子元素传递

    如图

    <style>
    .div1{
    	text-align:center;
    	width:100%;
    	height:200px;
    	background:#9F0;
    	
    }
    
    
    .div2{
    	display:block;
    	width:200px;
    	height:50px;
    	background:#00F;
    }
    span{
    	display:inline-block;
    	height:100px;
    	background:#0F0;	
    }
    
    h1{
    	display:inline;
    	background:#F00;
    }
    </style>
    
    
    <body>
    <div class="div1">
    <h1>我是中心</h1>
    <div><div class="div2">第三个中心</div></div>
    <span>这是中心</span>
    </div>
    </body>

    蓝色和红色对比说明center可作用于display为inline的元素,但不能作用于display为block的元素

    蓝色与绿色对比说明center可作用于display为inline-block的元素,但不能作用于display为block的元素

    蓝色与蓝色里面的文字对比说明center可作用于文字,并且具有向子容器传递的特点


    2、float只作用于容器本身,不作用于里面的元素,不具有传递性

    <style>
    .div1{
    	width:100%;
    	height:200px;
    	background:#CF0;
    	float:right;
    }
    
    .div2{
    	width:100px;
    	height:100px;
    	float:right;
    	background:#0F0;
    }
    
    .div3{
    	width:100px;
    	height:100px;
    	background:#F00;
    }
    
    </style>
    
    
    <body>
    <div class="div1">
    我要float
    <div class="div2"></div>
    <div class="div3"></div>
    </div>
    </body>

    文字和红色与绿色对比说明float可作用于容器本身,但不能作用于容器里面的内容,也不能传递


    float

    float元素不能撑大父容器以及父容器之上的各层容器的高度,但是float元素里面有高度的元素可以撑大float元素的高度,而且float元素中有高度的相邻元素也可以撑大float元素父容器的高度


    即使float元素里面的元素有高度,float元素后面的元素仍然会忽略float元素以及里面元素的位置而决定自己的位置,但是如果float元素后面的元素position为static则float元素的后面元素会处于float以及里面元素之下,否则反之


    如果float元素前面有相邻元素,float元素会忽略display为inline和inline-block的元素而位于他们之前且同行,但是不能位于display为block的元素之前且不同行



    第一部分代码:

    <style>
    .div1{
    	background:#000;
    	width:200px;	
    }
    
    
    .div2{
    	width:100px;
    	background-color:#0F0;
    	float:left;
    }
    
    .div3{
    	width:200px;
    	height:100px;
    	background-color:#009;
    }
    
    p{
            background-color:#F00;
    }
    
    </style>
    
    
    <body>
    <div class="div1">
    <div class="div2">
    <p>我在div1里面</p>
    </div>
    </div>
    <div class="div3"></div>
    </body>


    将div3的postion设置为relative或者absolute后为


    简单说明:未显示出来的黑色为div1,绿色为div2,红色为p,蓝色为div3

    未显示的黑色和绿色对比说明float元素不能撑大父容器的高度

    绿色与红色对比说明float元素可以被float元素里面的元素撑大高度

    蓝色和绿色对比说明float元素后面的元素会忽略float元素以及里面元素的位置而决定自己的位置,但是float元素后面的position为static的元素会处于float元素以及里面元素之下



    第二部分代码:

    <style>
    .div1{
    	width:200px;
    	background:#F00;
    }
    
    
    .div2{
    	width:150px;
    	height:50px;
    	display:inline-block;
    	background:#000;
    }
    
    .div3{
    	width:100px;
    	background-color:#0F0;
    	float:left;
    
    }
    </style>
    
    
    <body>
    <div class="div1">
    <div class="div2"></div>
    <div class="div3">
    <p>我在float里面</p>
    </div>
    </div>
    
    </body>

    简单说明:红色为div1,黑色为div2,绿色为div3

    绿色与黑色对比说明float元素不能撑大父容器高度,但是float元素中有高度的兄弟元素可以撑大父容器高度


    第三部分代码:

    <style>
    .div1{
    	width:100px;
    	height:100px;
    	background-color:#000;
    	display:inline-block;
    }
    
    .div2{
    	width:100px;
    	height:100px;
    	background-color:#F00;
    	float:left;
    }
    </style>
    
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    </body>


    简单说明:红色为div2,黑色为div1


    将div1的display改为block为:





    展开全文
  • 在使用div+css进行网页制作时,我们经常需要对某些元素...float属性经常被运用于制作Horizontal Menu(横向菜单)和实现多列式网页布局。根据它提供的 left 和right 两个值,我们可以很容易的把特定的元素从文档流中
  • 关于float与浮动失效问题

    万次阅读 2017-04-02 00:00:36
    float属性定义在哪个方向浮动,有三个值,分别为left,right,none,inheirt。 left : 向左浮动 right:向右浮动 none:不浮动 inheirt:从父元素继承float属性 .div1{ width:300px; height:200px; float:left; } ....
  • Shader常用函数属性

    千次阅读 2019-03-19 02:19:31
    Properties属性支持类型 属性类型 默认值的定义语法 例子 Int number _Int(“Int”,Int)=2 Float number _Float(“Float”,Float)=1.5 Range(min,max) number _Range(“Range”,Range(0.0,5.0))=3.0 ...
  • 对于Position、Float我们在平时使用上可以说是使用频率非常高的两CSS属性,对于这两属性的使用...Position、Float属性的基本使用方法Position、Float属性对元素所造成的影响Position、Float属性交叉使用上面的影响
  • Position 的四种属性值

    千次阅读 2017-06-07 19:50:23
    首先Position个属性值,分别是static 、fixed、 relative 、absolute。 第一个属性值是static,这是position的默认属性,一般我们都不会用到他,所以也很少提到他,但是在特殊的情况下,他又有着不可替代的作用...
  • 时候数据库中的某些字段值要求不为空,所以代码中要判断这些字段对应的属性值是否为空,当对象属性过多时,一属性去判断,会显得代码冗余,所以,可以借助工具类 package ...
  • CSS样式哪些常用属性

    千次阅读 2017-05-27 19:09:54
    一般的一DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:《 css样式属性大全(中文注释)》一 CSS文字属性:color : #999999; /*文字颜色*/ font-family ...
  • CSS——灵活布局 float (浮动属性)

    千次阅读 2016-08-24 00:21:28
    float属性 clear属性 float与overfloat ————*注释:摘自 W3C、赵老师的ppt 第一部分1. 浮动概述浮动定位是指(特点) - 将元素排除在普通流之外,即元素将脱离标准文档流 - 元素将不在页面占用空间 - 将...
  • position属性值(面试必考)

    千次阅读 2017-08-14 21:05:47
    position属性同样可以实现和float属性一样的效果,其主要被运行于网页布局上。 它主要提供static, relative, absolute和fixed四个值。 static为默认值,指示元素出现在正常的文档流中;相对定位(relative):相对于...
  • CSS常用属性速查表

    千次阅读 2016-03-20 01:34:56
    属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性 描述 CSS  font 在一声明中设置所有字体属性。 1  font-family 规定文本...
  • css属性列表 和 属性值含义

    千次阅读 2007-10-29 10:33:00
    css属性列表 属性名称字体属性(Font)font-familyfont-stylefont-variantfont-weightfont-size颜色和背景属性ColorBa
  • CSS中的float和clear属性

    千次阅读 2009-02-13 11:33:00
    页面design中,用CSS控制布局时float与clear属性的运用至关重要,一定要理解清楚。下面用我自己摸索和网络上整理的内容加以总结。 第一,必须要明白两件事: 1 .浏览器事按照HTML代码中对象声明的先后顺序,以流...
  • 4.6 CSS常用属性

    万次阅读 2019-05-21 12:05:48
    HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色. background-color: hsl(240,100%,50%);color:white; b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、...
  • 这个方法用于给着色器中指定的变量设置每个顶点属性三个元素的的取值指针起始位置。 要达到此目的,需要开启以下三个属性,参数就是着色器中的要获取顶点属性各元素的变量。 glEnableVertexAttribArray(_...
  • 三个属性就可以知道,tansition是一个过渡属性,就是一个属性从一个过渡到另一个,tansform变换,就是一个整体的位置(或整体大小)发生变换,animation动画,就是在一段时间内各种属性进行变化从而达到一个...
  • YAML中允许表示种格式,分别是常量,对象和数组 基本格式要求 1.YAML大小写敏感 2.使用缩进代表层级关系 3.缩进只能使用空格,不能使用TAB,不要求空格数,只需要相同层级左对齐(一般2或4空格) 对象....
  • 前端开发div常用属性标签大全

    万次阅读 多人点赞 2017-09-09 17:57:22
    position的属性static、fixed、relative、absolute四个属性常用relative和absolute。若指定为static时,DIV遵循HTML规则;若指定为relative时,可以用top、left、right、bottom来设置DIV在页面中的偏移(相...
  • CSS类名及常用属性总结

    千次阅读 多人点赞 2020-07-14 21:43:04
    CSS常用类和属性总结CSS常用类总结页面结构div+css命名导航功能样式文件命名CSS常用属性总结字体设置文本属性盒子设置其它常用属性 CSS常用类总结 页面结构 容器: container 页头:header 内容:content/container ...
  • 传统的布局方法都是基于盒模型实现的,通过display,position,float属性设置到达目的。但是,垂直居中的布局就会一点麻烦了…用flex作响应式布局,就会轻松的多 flex布局相关属性(父元素) 1.display: ...
  • 关于css的float,overflow及z-index属性

    千次阅读 2015-10-10 10:58:45
    I.关于float 代码示例一如下: ========================================   ... float属性,overflow,z-index属性   div{ width:200px; height:100px; /*float:left;*/ } #d{ background-co
  • HTML常用标签和属性大全

    万次阅读 多人点赞 2018-08-18 09:52:04
    表示颜色的有三种方式; .....属性可分为种: align 属性 列表  1无序列表又称符号列表 2有序列表 3定义列表 name 连接名称 target目标窗口语法格式: 图像 语法格式: font元素 表格语法格式...
  • Flex 布局详解 - Flex布局的常用属性

    万次阅读 多人点赞 2019-05-14 19:33:22
    flex布局中的一些基本概念容器和项目项目在容器中的显示容器的一些属性flex-direction 属性flex-wrap属性flex-flow属性justify-content 属性align-items 属性项目的一些属性order属性flex-grow 属性flex-shrink 属性...
  • 属性或方法 说明 axes 返回行轴标签列表 dtype 返回对象的数据类型(dtype) empty 如果系列为空,则返回True ndim 返回底层数据的维数 size 元素总数 values 将系列作为ndarray返回 ...
  • 我们在OC中定义变量,可以自己来定义变量的setter方法来设置变量,用getter方法来获取变量。但是当变量数量增多时,还采用手动添加setter/getter方法来操作变量,就会使得程序代码量大大增加。幸好从OC 2.0开始...
  • CSS3常用属性及效果汇总

    万次阅读 多人点赞 2017-01-06 20:14:31
    本篇主要说了一些CSS3的常用属性,并附上了代码及效果展示,内容包含了边框的圆角,阴影等效果,背景的增强型功能,文本效果改变等内容。
  • css之float详解

    千次阅读 2016-11-23 14:51:19
    浮动float属性值: left:元素向左浮动 right:元素向右浮动 none:默认值。元素不浮动。 inhert:规定从父元素继承float的属性值; 浮动会让元素本身脱离文档流,对后面的元素会产生影响,会让后面元素文字环绕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 233,829
精华内容 93,531
关键字:

常用的float属性值有三个