CSS day7 元素的浮动布局

最新推荐文章于 2024-02-05 19:41:17 发布

肝JOJO

最新推荐文章于 2024-02-05 19:41:17 发布

阅读量142

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_34620296/article/details/99709479

版权

HTML+CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字或图片重叠

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .green {
            width: 100px;height: 100px;
            background-color: green;  
            float: left;  /* 左浮动 */   
        }
        .red{
            width: 200px;height: 150px;
            background-color: red;
        }

    </style>
</head>
<body>
    <p>文字环绕效果</p>  <!-- 浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字重叠 -->
    <div class="green" ></div>
    <div class="red">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
    

</body>
</html>

2.要使其不发生重叠

设置其左浮动,这些容器会依次从左往右排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .a{
            width: 200px;
            background-color: brown;           
        }
        .b{
            width: 300px;
            background-color:chartreuse;         
        }
        .c{
            width: 200px;
            background-color:deepskyblue;  
        }
        .a,.b,.c{float: left;height: 150px;}

    </style>
</head>
<body>

    <p>横向排版</p>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    
</body>
</html

3.避免浮动容器下面的容器被遮挡

使用另一个容器将浮动容器包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .a {
            width: 20%;
            background: orangered url(images/jojo.jpg)
        }
        .b {
            width: 60%;
            background:green;
        }
        .c {
            width: 20%;
            background: blue;
        }
        .a,.b,.c{
            float: left;
            height: 200px;
        }
        .h {
            height: 360px;
            background: yellow;
            }
        .outer {
            height: 200px;
        
        }

    </style>
</head>
<body>
    <div class="outer">   <!-- 用另一个容器将其包裹住,避免下面的容器会有一部分被遮住 -->
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
    <div class="h"></div>   
</body>
</html>

4.使容器的排版不受浮动影响

使用 clear:left/right/both 设置其不受左/右/所有浮动影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul{
            width: 300px;height: 500px;
            border-width: 1px;
            border-style: solclass;
            border-color: black;          
        }       
        .a{float:left;}
        .b{float:right;}
        .c{float:left;}
        .d{float:right;}
        
        li { clear: both;}  
        /* 使其不受左右浮动的影响 */   
    </style>
</head>
<body>
    <ul>
        <li class="a" >在?</li>
        <li class="b" >在的</li>
        <li class="c" >真的吗?</li>
        <li class="d" >真的</li>

    </ul>
</body>
</html>

5.浮动元素在排列时,只参考前一个元素的位置即可

例如d的位置是参考c的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .a{width: 30%;height: 100px;background-color: blue}
        .b{width: 30%;height: 200px;background-color: yellow}
        .c{width: 30%;height: 300px;background-color: violet}
        .d{width: 30%;height: 400px;background-color: black}
        .a,.b,.c,.d{float: left;}       
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</body>
</html>

6.tips

*浮动元素不会覆盖文字内容
*浮动元素不会覆盖图片内容
*浮动元素不会覆盖表单元素(输入框.按钮.下拉框.复选框等)

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS day7 元素的浮动布局

1.浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字或图片重叠例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
复制链接

扫一扫

专栏目录