（12）页面的布局(浮动布局)

最新推荐文章于 2021-05-10 16:35:20 发布

weixin_30657999

最新推荐文章于 2021-05-10 16:35:20 发布

阅读量241

点赞数

原文链接：http://www.cnblogs.com/shizhengquan/p/10338507.html

版权

浮动布局的特点

1、子级一旦浮动,就不再撑开父级高度

2、浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次

浮动布局的实例

案例1、需求：用浮动布局实现标签并排排列

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        .box{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
 /*float就是浮动布局，只要是排成一排的都是浮动布局设置的*/
            float: left;
        }

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>

案例2、需求：增加一个标签，和box的父级是同级的标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        .box{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
            float: left;
        }
        .ele{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div>
    <div>
        <div class="ele">4</div>
    </div>
</body>
</html>
PS：出现了一个问题，就是sup标签下的子标签开启了浮动布局，但是ele标签没有开，ele标签不显示
PS：原因就是sup标签设置了浮动，而ele标签是和sup标签同级的，而ele标签在sup标签下面，所以被sup标签覆盖了，导致无法显示

解决案例2出现bug的问题

思路1：先检查区域，我们先给。sup区域增加一个颜色，查看sup区域是在什么位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        .box{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
/*float就是浮动布局，只要是排成一排的都是浮动布局设置的*/
            /*子级一旦浮动,就不再撑开父级高度*/
            /*浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次*/
            float: left;
        }

/*sup是父级,这里如果将sup设置背景色，没有开启浮动，则会被撑开，能够看到背景色的区域*/
        .sup{
            background-color: firebrick;
        }

        .ele{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div>
    <div>
        <div class="ele">4</div>
    </div>
</body>
</html>

思路2：由于思路一可得知sup区域是在ele区域的上面，但是因为子级一旦浮动,就不再撑开父级高度，所以ele因为sup的父级没有高度，则位置到了sup的正下方，导致被覆盖

因为浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次，浮动有一个清浮动操作,可以让子级从新撑开父级高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        .box{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;

/*浮动有一个清浮动操作,可以让子级从新撑开父级高度*/
            float: left;
        }

/*这个就是清浮动的写法，用父类伪类来写*/
        /*子浮动,父级开启清浮动,父级的兄弟显示区域正常*/
        .sup:after{
            content: "";
            display: block;
            clear: both;
        }

        .ele{
            width: 200px;
            height: 80px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div>
    <div>
        <div class="ele">4</div>
    </div>
</body>
</html>

浮动布局实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局实例</title>
<!--清除默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .header{
            width: 1210px;
            height: 100px;
            background-color: red;
/*区域块水平居中*/
            margin-left: auto;
            margin-right: auto;
/*margin: 0 auto;  这是上面两行的简写，这里后面有四个值，代表上下左右，如果用auto,则只要写2个值，第一个0代表的是上，第二个代表右，规则就是找对边的参数，顺时针下没有找上，左没有找右，这样的下来就是上下0，左右auto*/
        }

/*父级的宽度决定子级一排排列的个数*/
        .nav{
            width: 1210px;
            margin: 0 auto;
        }

/*父级标签为什么要清浮动：高度需要子级撑开，因为不能设置死，子级可以设置高度，但不一定准确*/
        .nav:after{
            content: "";
            display: block;
            clear: both;
        }

/*子标签浮动：同行显示*/
        .nav li{
            width: 200px;
            height: 48px;
            background-color: black;
            float: left;
        }

        .body{
            width: 1210px;
            height: 100px;
            margin: 0 auto;
            background-color: darkolivegreen;
        }

/*nav标签下子级的选择，这个括号1就表示第一个,width表示高度位置，backgroud里面设置精灵图的位置，第一个不动所以不需要参数*/
        .nav li:nth-child(1){
            width: 155px;
/*将精灵图显示在第一个子区域*/
            background: url("img/bg.png") no-repeat;
        }

        .nav li:nth-child(2){
            width: 157px;
/*将精灵图显示在第2个子区域,由于要显示的区域在精灵图的第二个位置，所以要调整位置，-155就是右移，后面的0就是表示y轴不动*/
            background: url("img/bg.png") no-repeat -155px 0;
        }

 /*这里第三个标签就是行高位置不动，宽位置需要移动，所以要在前面标签的基础上还要减去157像素，利用calc函数完成减法*/
        .nav li:nth-child(3){
            width: 167px;
            background: url("img/bg.png") no-repeat calc(-155px - 157px) 0;
        }

        .nav li:nth-child(4){
            width: 158px;
            background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px) 0;
        }

        .nav li:nth-child(5){
            width: 101px;
            background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0;
        }

        .nav li:nth-child(6){
            width: 185px;
            background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0;
        }

        .nav li:nth-child(7){
            width: 177px;
            background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0;
        }

/*如果开启悬停后没有生效，则要检查优先级，这里要写在最后*/
        .nav li:hover{
/*.nav li:nth-child(1):hover 这个就是给单独的标签设置悬停效果*/
/*如果所有区域是统一位置，则开启悬停效果不需要单独设置，y轴上移*/
            background-position-y:-48px;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <ul class="nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="body"></div>
</body>
</html>

转载于:https://www.cnblogs.com/shizhengquan/p/10338507.html

weixin_30657999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（12）页面的布局(浮动布局)

浮动布局的特点1、子级一旦浮动,就不再撑开父级高度2、浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次浮动布局的实例案例1、需求：用浮动布局实现标签并排排列<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫