使用浮动实现网页布局

最新推荐文章于 2024-02-20 22:27:25 发布

hello_xujj

最新推荐文章于 2024-02-20 22:27:25 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116600055

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

使用浮动实现网页布局

注意事项

1、垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！

2、“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。

3、多用div标签。

BFC规范和浏览器差异

BFC规范

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到

外面的元素，反之亦然。

一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。

如何创建BFC

方法①：float的值不是none ；

方法②：position的值不是static或者relative ；

方法③：display的值是inline-block、flex或者inline-flex；

方法④：overflow:hidden。

什么是overflow:hidden;

overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏，overflow:hidden;是非常好用的让盒子形成BFC的方法。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            border: 10px solid #000;
            overflow: hidden;
        }
        .box .c1{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .box .c2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

网页效果如下：
在这里插入图片描述

BFC的其他作用

1、BFC可以取消盒子margin塌陷

2、BFC可以可以阻止元素被浮动元素覆盖

浏览器差异

1、IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”

2、如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程。

hello_xujj

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用浮动实现网页布局

使用浮动实现网页布局注意事项1、垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！2、“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。3、多用div标签。BFC规范和浏览器差异BFC规范BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。如何创建BFC方法①：f
复制链接

扫一扫