html 03 浮动布局以及清除浮动

最新推荐文章于 2022-02-20 13:33:05 发布

wuhan_yking

最新推荐文章于 2022-02-20 13:33:05 发布

阅读量381

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wuhan_yking/article/details/52751499

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、如何理解“浮动”

①“浮动”属性float，三种情况：left，right，none

②“浮动”有漂浮之意，就像高楼一样，从上望下看，在一个平面，但正面看，有层次之分；

③带有“浮动”属性的div在普通div的上层，会覆盖在它下面的div

二、实践分析float的用法

①

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        width: 200px;
        height: 90px;
        background: blue;
    }
    #div2{
        width: 200px;
        height: 80px;
        background: red;
    }
</style>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        width: 200px;
        height: 90px;
        background: blue;
    }
    #div2{
        width: 200px;
        height: 80px;
        background: red;
        float: left;
    }
</style>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

上述两个html代码效果图是一样的，没有出现两个div在同一行的情况，这是为什么？

原因在于第一个div没有用float属性，很霸道，独占一行，不允许其他人和他并列一行，在最底层；所以第二个div不管你用不用float，都不会并列一行。

但是如果用float：right，第二个div会飘到屏幕最右侧；

②

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        width: 200px;
        height: 90px;
        background: blue;
        float: left;
    }
    #div2{
        width: 300px;
        height: 200px;
        background: red;

    }
</style>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

由于div1使用了float属性，导致div1覆盖在div2之上，文字受float影响，在div1边框外显示，而不是在左上角显示；

如果要实现两个div并列一行，则两个div都要设置float：left

三、清除浮动

①属性：clear，三种：right，left，both，一般用both

②理解：清除的是上层div的float情况，对下层div的float无影响

四、通过float和clear属性实现“田”布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        width: 200px;
        height: 100px;
        background: blue;
        float: left;
    }
    #div2{
        width: 200px;
        height: 100px;
        background: red;
        float: left;

    }
    #div3{
        width:200px;
        height: 100px;
        background: orange;
        clear: both;
        float: left;

    }
    #div4{
        width:200px;
        height: 100px;
        background: green;
        float: left;
    }
</style>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<div id="div4">我是div4</div>
</body>
</html>

效果图：

五、问题

如果父div中有2个子div是浮动的，父div的高度有没有被子div撑起来，父div是多高；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #child1{
        width:100px;
        height: 100px;
        float: left;
        background: red;
    }
    #child2{
        width:100px;
        height: 100px;
        float: left;
        background: green;
    }
</style>
<body>
<div id="parent">
    <div id="child1">子1</div>
    <div id="child2">子2</div>

</div>
</body>
</html>

答案：0px；

因为是浮动了，那么父DIV是不被撑起来的，那么高度就是0px，如果想让父div撑起来，一种方法就是清除浮动，也就是在浮动div后面加一个<div style="clear:both"></div>或者将父DIV添加一个overflow:hidden也是能够达到这样的效果的。

wuhan_yking

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 03 浮动布局以及清除浮动

一、如何理解“浮动”①“浮动”属性float，三种情况：left，right，none②“浮动”有漂浮之意，就像高楼一样，从上望下看，在一个平面，但正面看，有层次之分；③带有“浮动”属性的div在普通div的上层，会覆盖在它下面的div二、实践分析float的用法①html>lang="en"> charset="UTF-8"> Title
复制链接

扫一扫