float元素详解

emer

2019-11-14 / 0 评论 / 50 阅读

11/14

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

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

这里说的是什么意思呢？

就是空间与文字的概念。

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

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

第二点呢就是会尽量靠上

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

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

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

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

<!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三栏布局

<!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>