其他分享
首页 > 其他分享> > CSS中定位的浮动float

CSS中定位的浮动float

作者：互联网

浮动到底是怎么样的？

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

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        height: 80px;
        background-color: #e13b00;
        float: left;
        clear: both;
    }
</style>
<body>
    <div id="div1">
        div1div1d
    </div>
    <p>
        1234567890
    </p>
    <p>
        1234567890
    </p>
</body>
</html>

 

标签：浮动,float,元素,边缘,水槽,文档,CSS
来源： https://www.cnblogs.com/wfy680/p/15121952.html