CSS学习八：浮动

一、页面布局方式

页面布局方式，主要包含：文档流（常规流）、浮动流

文档流：

  • 文档流中元素框的位置，由元素在HTML中的位置决定。
  • 块级元素从上到下依次排列，框之间垂直距离由框的垂直margin计算得到。块与块之间的margin取较大的margin值。
  • 行内元素在一行中布置。行内元素之间的margin间，取它们之和。

浮动流：元素从正常的排列顺序抽离

  • 浮动可以使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在正常文档流中，所以标准文档流中的块框表现得像浮动框不存在一样。即浮动框的位置，会被文档流的框占据。

 

浮动是由css的一个属性来决定的。语法：{float：....}

{float： left向左浮动，right向右浮动，none默认值}

 

 float属性，定义元素浮动，在朝上浮动时靠哪个方向停靠。

往上浮动时，上到什么地方呢？上升到第一个浮动块后面。如果当前元素是第一个浮动块，那就在当前行的位置浮动。

通俗的说，文档流是一层纸，浮动层是另外一层低，浮动层在前面。

如果没有任何元素浮动则没有浮动层；第一个浮动的元素的位置（行）所在的位置，认为是浮动层的顶部地方（但它已经移动到浮动层了，相当于它创建了浮动层）；第二个元素浮动时，以第一个浮动元素所在的位置作为顶部的地方，移动到此行，然后在此行往左边或往右边靠；依次类推。当然任何元素浮动以后，它所在的位置就空出来了，文档流所在的层的元素会占据它的位置。

浮动的时侯，都是贴着它的垂直方向的上一个元素框，左右移动。当本行放不下的时侯，被挤到下一行。

通过float属性实现元素的浮动，以往这个属性总应用于图像，使文本围绕在它周围。不过在css中，任何元素都可以浮动。

浮动元素，会生成一个块级框，而不论这本身是何种元素。

通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素，无论此元素本身是何种元素。

通过display:'inline'设置以后都会变成行内元素；通过display:'block'设置以后都会变成块级元素；通过display:'inline-block'设置以后都会变成行内块级元素。

 

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可以地窄。比如，span。

元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。

但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。

HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

显示元素，分为两种情况，一种是‘块级元素’ ‘block’，还有一种是“行内元素”inline，也叫“内联元素”。

 

示例，依次浮动div2，div3，div4，往左或往右浮动，观察效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #div1 {
                width: 200px;
                height: 50px;
                background-color: #0000FF;
            }
            #div2 {
                width: 100px;
                height: 100px;
                background-color: yellow;
                float: left;
            }
            #div3 {
                width: 280px;
                height: 130px;
                background-color: green;
                /* float: left; */
            }
            #div4 {
                width: 60px;
                height: 60px;
                background-color: orange;
                /* float: left; */
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
        <div id="div3">
        </div>
        <div id="div4">
        </div>
    </body>
</html>

 

 

浮动产生的副作用：

  • 背景不能显示：如果对父级设置了CSS背景或者背景图片，而父级不能被撑开时，导致背景不能显示。当然，如果父级元素被撑开，背景将正常显示。
  • 边框不能被撑开
  • margin padding不能正确显示，特别是上下边的margin跟padding不能正确显示

在此示例中，背景被撑开：

    <body>
        <div style="background-color: #666666;">
        <p>abc</p>
    </body>

 在以上示例中，如果将唯一能撑开div的元素p，变成浮动元素。则div不能被撑开，背景不能显示：

    <body>
        <div style="background-color: #666666;">
        <p style="float: left;">abc</p>
    </body>

解决办法之一：给父级元素设置高度，让它将背景撑开。或者清除浮动。 

 

特殊情况：图像浮动后，文字围绕图片：

文字并没有占据图像浮动后的位置，而是围绕图像。

<img src="img/2.jpg" style="float: left; width: 100px; height: 100px;"/>
<p>aaaaaaaaaaaaaaaasdfxcvvvvvvvvvvvvvvvvvvvvvvvdddddcccccccddddddddddddddddddsssss</p>

 

浮动带来的margin问题示例：

在此示例中，box2，box的margin都设置为20px；3个box并排，在同一行的方向上，块与块之间的margin等于两个块的margin之和；box1和box2的margin为20px，box2和box3的margin之和为40px，没有问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 800px;
                height: 400px;
                background-color: #DEB887;
            }
            #box1,#box2,#box3 {
                width: 200px;
                height: 100px;
            }
            #box1 {
                background-color: yellow;
                float: left;
            }
            #box2 {
                background-color: blue;
                float: left;
                margin: 20px;
            }
            #box3 {
                background-color: red;
                float: left;
                margin: 20px;
                /* width: 600px; */
            }

        </style>
    </head>
    <body>
        <div id="box">
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
        </div>
    </body>
</html>

 

如果将box3的宽度设置为600px，那么一行将放不下box1，box2，box3；box3将被挤到下一行。

box3挤到下一行后，box1和box2之间的横向margin为20px，是正确的。

但是box2和box3之间垂直margin之和，应该取它们中较大的margin，因此它们垂直之间的margin应该为20；

实际上box2和box3之间的垂直margin之和，变为了box2 + box3，共40px。这是浮动带来的margin问题情况之一。

解决办法：试以几种方法，未解决。

二、清除浮动

语法：{clear: left/right/both/none;}

  • clear属性，规定元素在哪一侧不允许其它浮动元素。
  • left：在左侧不允许浮动元素
  • right：在右侧不允许浮动元素
  • both：在左右两侧均不允许浮动元素
  • none：默认值，允许浮动元素出现在两侧。

其它清除浮动的方法：

  • 在父级元素添加最后一个子元素时，子元素设置样式clear:both
  • 给父级元素设置高度
  • 设置:after伪元素，如div:after{display:block;clear:both;content:""}
  • 父级div定义overflow:hidden和zoom:1

 

清除浮动示例：

 

posted on 2018-11-16 22:23  myworldworld  阅读(150)  评论(0)    收藏  举报

导航