基于float的几种布局

时间 2019-12-08

标签基于 float 几种布局栏目 CSS 繁體版

原文原文链接

在这里介绍基于float的几种布局.css

1.浮动与两侧自适应的布局

如图所示，左边没有限定宽度，右边宽度自适应。使用table-cell实现的布局，能够适用于两栏的布局。

HTML代码html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>与浮动与两侧自适应的布局</title>
</head>
<body>
<div class="container">
    <div class="left"><img src='1.jpg'></div>
    <div class="right">与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局</div>
</div>
</body>
</html>

对应的CSS代码app

*{padding:0;margin:0;}
    .container{
            max-width:960px;
            margin:0 auto;
     }
    .left{
        float:left;
        margin-right:20px;
    }
    .right{
        height:220px;
        display: table-cell; /*像表格单元格同样显示*/
        width: 3000px;/*因为是根据内容而决定宽度，当内容不是不少的时候， 宽度没有被撑开，此时一些相对于这个元素定位的元素就会错位，故设置足够长的宽度，使其定位正常*/
        *width: auto;/*兼容IE六、7*/
        background:green;
    }

须要说明一点是：display: table-cell后，是根据内容来决定其实际的宽度。
table-cell在IE六、7中是不支持的，能够使用*width:auto进行兼容性处理,不过如今这两个版本IE的市场占有率很低，适当的时候能够删去。布局

2.右侧尺寸固定的浮动布局

分别有两种方式，一种不改变DOM树结构显示顺序，一种则会使DOM树结构顺序与显示的界面相异。
spa

改变DOM树前后顺序的方法

HTML代码code

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
    <div class="right"></div>
    <div class="left">与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局</div>
</div>
</body>
</html>

对应的CSS代码htm

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        margin-right:200px;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: right;
        background:green;
    }

关键点在于，HTML代码中，把在右边显示的DIV放到左边显示的前面，而后经过float: right浮动到右边，可经过调整left盒子的margin-right来调整两个盒子之间的间距。
这种方式会破坏页面优先渲染顺序，它会先渲染右边的盒子，再渲染左边的盒子，视页面区域内容重要程度而定。图片

不改变DOM树前后顺序的方法

HTML代码element

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
    <div class="left">
<p class="left-content">
与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局
</p>
</div>
    <div class="right"></div>
</div>
</body>
</html>

对应的CSS代码it

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
            width:100%;
            float:left;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: left;
        margin-left:-200px;/*这个数值的大小是跟其宽度值相同的*/
        background:green;
    } 
    .left-content{
        margin-right:220px; //文字不被覆盖
    }

关于negative margin（负边距），w3c提到:

Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.

给定一个足够大的负边距，能够使受影响的相邻元素发生重合。

3.单侧固定的布局

单侧固定的布局分为固定布局和流体布局。
通用的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局</div>
</div>
</body>
</html>

固定布局

对应的CSS代码

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        background:red;
    }
    .right{
        width:100px;
        height:100px;
        float: right;
        background:green;
    }

经过float:left; float:right;实现。

流体布局

对应的CSS代码

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        margin-right:20px;
        background:red;
    }
    .right{
        background:green;
    }