CSS学习笔记——CSS中定位的浮动float

时间 2019-11-26

标签 css 学习笔记定位浮动 float 栏目 CSS 繁體版

原文原文链接

昨天在解决了盒模型的问题以后又出现了新的知识模糊点：浮动和绝对定位？今天先解决浮动相关的问题，首先列举出想要解决的问题：html

1.浮动究竟是怎么样的？浏览器

2.浮动对元素的影响有什么？
网络

3.浮动主要用来干什么？布局

第一个问题：浮动究竟是怎么样的？学习

W3CSCHOOL对浮动属性的解释：浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。因此浮动也有left、right、none三种。code

我我的的理解是：HTML 文件就像是一个方形的水槽，它在浏览器中加载的过程就比如是向水槽中放水，而这些水就表明的是页面中的各个元素，他们都是有顺序的进入水槽（文档流的顺序和咱们写字同样，从上到下从左到右）。当出现了一个具备浮动属性（float）的元素时，就好像是水流中多了一块泡沫，它会浮在水面上（也就是说明元素脱离了文档流）。在水流中止后（页面加载完毕），这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘（浮动元素会处于包含框的边缘或者另外一个浮动元素的边缘）。视频

对于浮动元素是否脱离了文档流，这个我刚开始也很迷糊，由于在看教学视频的时候一个老师说没有，另外一个老师说有。因而就本身敲了代码作了点实验：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{

        height: 100px;
        background-color: #e13b00;
        float: left;
        clear: both;
    }

</style>
<body>
    <div id="div1">
        div1div1d
    </div>
    <p>1234567890
    </p>
    <p>1234567890
    </p>
</body>
</html>

上面代码的效果以下：文档

红色背景的Div是设置了左浮动的元素，根据浮动的定义它应该是脱离文档流的，具体表现以下图：it

当咱们审查第二个p标签时发现这个标签实际上是覆盖了DIV块的，仍是独自占据一行，并非从DIV块的边缘开始的。这就说明：

设置的浮动的元素实际上是脱离的文档流的，可是这个元素的内容仍是会在视觉上占据空间，不会覆盖其余元素或者被其余元素覆盖。

2.浮动的元素对其余元素的影响有什么？

浮动元素对其余元素的影响就如同上面的例子显示的，浮动的元素会根据本身内容的大小把他以后的元素的内容挤到后面（特别注意，这里说的是内容！是内容！是内容！）。

这里特别说明一下：有些视频教学里说浮动的影响只会做用在紧邻在它后面的元素，这个说法仍是有问题的，我上面举得那个例子就说明了红色的DIV块浮动影响的是它后面的两个p元素，而浮动的元素到底会影响多大范围是根据浮动的元素它的内容的大小决定的。

清除浮动带来的影响主要是经过两种方式：

第一种：给不想受到影响的元素增长属性clear：both/right/left. 这个属性的意思并非清除什么，而是应该理解为拥有这个属性的元素左边或者右边不容许存在浮动元素的内容。

例如咱们给第一个p标签增长了clear:left;这样一个属性，那么它就会从DIV块下面开始出现，同时会把第二个p标签也带下来（由于他们是按照顺序显示的）。而咱们给第二个p标签增长clear:left，第一个p标签仍是受到浮动的影响的。

第二种：给不想受到影响的元素增长属性width：100%；overflow:hidden; 这个方法也是有效的。

3.浮动主要用来干什么？

其实浮动的做用仍是很重要的，咱们能够利用它实现很常见的两列或者多列的网页布局，下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{margin: 0px;padding: 0px}
    #div{
        width: 70%;
        margin: auto;
    }
    #header{
        height: 200px;
        background-color: darkslategrey;
    }
    #main{
        height: 300px;
        padding: 2%;
        background-color: #bfbfbf;
    }
    #left{
        float: left;
        width: 30%;
        height: 300px;
        background-color: #0044aa;
    }
    #right{
        float: right;
        width: 65%;
        height: 300px;
        background-color: yellow;
    }
    #footer{
        height: 200px;
        background-color: rosybrown;
    }

</style>
<body>
    <div id="div">
        <div id="header">
        </div>
        <div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <div id="footer">
        </div>
    </div>

</body>
</html>

效果以下：

这就是咱们常常看到的一种网页布局，固然我这个例子有点简陋，其实也能够把中间的部分换成三列或是更复杂的形式。

对浮动的学习就到这里了，今天有一种感觉就是：学习知识的过程当中仍是要多敲代码多实验，不能只看书中怎么作或者视频里面老师怎么作，他们思想也并非就是彻底正确。对于疑惑的问题不能马虎带过。固然不只仅只是学习，在任什么时候候都该保持有本身的想法。

明天解决绝对定位的问题。

2016年01月09日

不积跬步，无以致千里

PS：我查阅的大部分资料都是来自于网络，若有侵权，请联系我删除