float元素详解

43 次浏览 5 分钟阅读 0 个喜欢

很多同学可能对于float不太理解这里的float有几点特性

第一点是float脱离文档流 当不脱离文本流

这里说的是什么意思呢？

就是空间与文字的概念。

你可以理解成为一个float：left的元素它脱离了文档是指的在一个容器内不受容器内其他的块级元素影响。

而容器内容文本呢？则会绕开它。

第二点呢就是会尽量靠上

第三就是对于父级元素的影响，怎么理解呢？

就是一个容器我们没有给它设置高度。因为我们的设想是让内容撑开父级元素

而如果我们给内容元素设置了float则会导致父级元素高度塌陷


以下是一张动图。请点击后观看

2019-11-14 20.58.13.gif图片暂时无法加载 


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 800px;
            height: 300px;
            background: linear-gradient(0deg, red 0%, green 100%)
        }
        .p1 {
            width: 100px;
            height: 100px;
            background: #ddd;
            float:left;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="p1"></span>
    </div>
    <div class="container">
        <span>我是文字</span>
        <span class="p1">float1</span>
        <span class="p1">float2</span>
        
    </div>
</body>
</html>



下面大家来看一个float三栏布局

屏幕快照 2019-11-14 下午9.44.11.png图片暂时无法加载 

<!DOCTYPE html>
<html>
<head>
    <title>float三栏布局</title>
    <style type="text/css">
        .left {
            float: left;
            height: 200px;
            width: 200px;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            background: green;
        }
        .middle {
            height: 200px;
            background: blue;
            margin-left: 200px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle">经典三栏布局</div>
</body>
</html>

#CSS#html