float元素详解

    选择打赏方式

很多同学可能对于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>

版权声明:若无特殊注明,本文皆为《 张宇童 》原创,转载请保留文章出处。
本文链接:float元素详解 https://www.zyt8.cn/h/229.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!