【CSS面试】Float布局的问题，以及clearfix？

最新推荐文章于 2021-09-16 20:05:55 发布

Milk595

最新推荐文章于 2021-09-16 20:05:55 发布

阅读量452

点赞数 2

分类专栏： CSS 前端面试文章标签： css

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107399554

版权

前端面试同时被 2 个专栏收录

55 篇文章 8 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

如何实现圣杯布局和双飞翼布局？（PC端常见—使用float的经典布局）

圣杯布局和双飞翼布局的目的：

① 三栏布局，中间一栏最先加载和渲染（内容最重要）
② 两侧内容固定，中间内容随着宽度自适应（不管屏幕放大缩小，中间内容都是自适应）
③ 一般用于PC网页

圣杯布局和双飞翼布局的技术总结：

① 使用float布局
② 两侧使用margin负值，以便和中间内容横向重叠
③ 防止中间内容被两侧覆盖，一个用padding,一个用margin

圣杯布局:

核心代码演示：
初始化：

<!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>
    body{
        /*最小宽度*/
        min-width:550px; 
    }
    #header {
        text-align: center;
        background-color: #f1f1f1;
    }

    #center {
        background-color: #ccc;
        width: 100%;
    }
    #left{
        background-color: yellow;
        width: 200px;
    }
    #right{
        background-color: red;
        width: 150px;
    }

    #footer{
        text-align: center;
        background-color: #f1f1f1;
    }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

初始化效果：
在这里插入图片描述
设置浮动：

    #container .column{
        float: left;
    }

在这里插入图片描述
footer去浮动：

    #footer{
        clear: both;
        text-align: center;
        background-color: #f1f1f1;
    }

在这里插入图片描述
设置padding：

    #container{
        padding-left:200px;
        padding-right:150px;
    }

在这里插入图片描述
左边：margin-left: -100%;

        #left {
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
        }

往左移动，挤多宽呢？container整个宽度，挤到最左侧后，挤上去了，因为有padding,所以先到达center的最右边，然后因为margin-left: -100%;回到center最左边
在这里插入图片描述
左边添加相对定位，right:200px;

        #left {
            position:relative; /*相对于自身移动*/
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }

在这里插入图片描述
右边margin-right:-150px;

        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

在这里插入图片描述
双飞翼布局：

初始化:

<!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>
     body{
         min-width: 550px;
     }

     #main{
         width: 100%;
         height: 200px;
         background-color: #ccc;
     }

     #left{
         width: 190px;
         height: 200px;
         background-color: #0000FF;
     }
     #right{
         width: 190px;
         height: 200px;
         background-color: #FF0000;
     }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
             this is main
        </div>
    </div>
        <div id="left" class="col">
             this is left
        </div>
        <div id="right" class="col">
             this is right
        </div>
</body>
</html>

初始效果：
在这里插入图片描述
浮动：

     .col{
         float: left;
     }

在这里插入图片描述
左右侧预留空白：双飞翼布局用margin,圣杯布局用padding：

     #main-wrap{
         margin: 0 190px 0 190px;
     }

在这里插入图片描述
左侧marin-left:-100%;

     #left{
         width: 190px;
         height: 200px;
         background-color: #0000FF;
         margin-left: -100%;
     }

在这里插入图片描述
如果右侧margin-right:-190px;则不是我们想要的效果:

     #right{
         width: 190px;
         height: 200px;
         background-color: #FF0000;
         margin-right: -190px;
     }

在这里插入图片描述
正确是：margin-left:-190px;

     #right{
         width: 190px;
         height: 200px;
         background-color: #FF0000;
         margin-left: -190px;
     }

在这里插入图片描述
总的来说，比较推荐双飞翼布局！！！，比较简单

手写clearfix：

回到圣杯布局中，删掉footer里面的clear:both:

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

在这里插入图片描述
footer重叠上去，淹没了

针对container，手写clearfix:

        /* 手写clearfix */ 
        .clearfix:after{
            content:''; /*内容*/
            display:table;
            clear:both;
        }

在这里插入图片描述

兼容ie低版本写法：可以写，可以不写

 /* 手写clearfix */ 
        .clearfix:after{
            content:''; /*内容*/
            display:table;
            clear:both;
        }
         .clearfix {
              *zoom: 1; /*兼容IE低版本*/

圣杯布局源代码：

<!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>
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position:relative; /*相对于自身移动*/
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写clearfix */ 
        .clearfix:after{
            content:''; /*内容*/
            display:table;
            clear:both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

双飞翼布局源代码：

<!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>
     body{
         min-width: 550px;
     }
     .col{
         float: left;
     }

     #main{
         width: 100%;
         height: 200px;
         background-color: #ccc;
     }
     #main-wrap{
         margin: 0 190px 0 190px;
     }

     #left{
         width: 190px;
         height: 200px;
         background-color: #0000FF;
         margin-left: -100%;
     }
     #right{
         width: 190px;
         height: 200px;
         background-color: #FF0000;
         margin-left: -190px;
     }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
             this is main
        </div>
    </div>
        <div id="left" class="col">
             this is left
        </div>
        <div id="right" class="col">
             this is right
        </div>
</body>
</html>

Milk595

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS面试】Float布局的问题，以及clearfix？

如何实现圣杯布局和双飞翼布局？（PC端常见—使用float的经典布局）圣杯布局和双飞翼布局的目的：① 三栏布局，中间一栏最先加载和渲染（内容最重要）② 两侧内容固定，中间内容随着宽度自适应（不管屏幕放大缩小，中间内容都是自适应）③ 一般用于PC网页圣杯布局和双飞翼布局的技术总结：① 使用float布局② 两侧使用margin负值，以便和中间内容横向重叠③ 防止中间内容被两侧覆盖，一个用padding,一个用margin核心代码演示：初始化：<!DOCTYPE html&g
复制链接

扫一扫