浮动布局的方法（总结）

电玩女神 2022-07-28 08:55 187阅读 0赞

HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例）

> **微博排版**

先上图片：  
![这里写图片描述][20160401112357977]

盒子中包含左右两个子盒子（用黑边框将其分开），就以这种左右两栏为布局的模型，来总结浮动布局的方法。

> 浮动布局HTML排版

<div class="container">
            <div class="wrap clearfix">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>
        </div>

> **方法一：固定布局**

![这里写图片描述][20160401113200636]

<style> .container{ width: 600px; background-color: #DDF3F7;} .wrap{ padding: 20px;overflow: hidden;} .box1{ float: left;width: 56px;background-color: #ccc;height: 300px;} /* 固定布局写法 */ .box2{ float: right;width: 484px;background-color: #ccc;height: 300px;} /*清除浮动造成的影响*/ .clearfix:after{ content: '';display: table;clear: both;} .clearfix{ *zoom:1;} </style>

> **方法二：流体布局**

![这里写图片描述][20160401113406825]

<style> .container{ width: 600px; background-color: #DDF3F7;} .wrap{ padding: 20px;overflow: hidden;} .box1{ float: left;width: 56px;background-color: #ccc;height: 300px;} /* 流体布局写法 */ .box2{ margin-left: 76px;background-color: #ccc;height: 300px;} /*清除浮动造成的影响*/ .clearfix:after{ content: '';display: table;clear: both;} .clearfix{ *zoom:1;} </style>

> **方法三：浮动与两侧皆自适应的流体布局**

![这里写图片描述][20160401113825108]

<style> .container{ width: 600px; background-color: #DDF3F7;} .wrap{ padding: 20px;overflow: hidden;} /* 浮动与两侧皆自适应的流体布局写法*/ .box1{ float: left;margin-right:20px;background-color: #ccc;height: 300px;} .box2{ display: table-cell; *display: inline-block; width: auto;} /*清除浮动造成的影响*/ .clearfix:after{ content: '';display: table;clear: both;} .clearfix{ *zoom:1;} </style>

注意采用这种方法，HTML文档中box1和box2中必须有内容

> **方法四：右浮动，改变DOM位置的流体布局**

![这里写图片描述][20160401114014061]

<style> .container{ width: 600px; background-color: #DDF3F7;} .wrap{ padding: 20px;overflow: hidden;} /* 浮动与两侧皆自适应的流体布局写法*/ .box1{ width: 56px; float: right;background-color: #ccc;height: 300px;} .box2{ margin-right: 76px;background-color: #ccc;height: 300px;} /*清除浮动造成的影响*/ .clearfix:after{ content: '';display: table;clear: both;} .clearfix{ *zoom:1;} </style>

> **方法五：左浮动，不改变DOM位置的流体布局写法**

![这里写图片描述][20160401114220562]

<style> .container{ width: 600px; background-color: #DDF3F7;} .wrap{ padding: 20px;overflow: hidden;} /* 浮动与两侧皆自适应的流体布局写法*/ .box1{ width: 100%; float: left;background-color: #ccc;height: 300px;} .box2{ width: 56px; float: left; margin-left: -56px;background-color: #000;height: 300px;} /*清除浮动造成的影响*/ .clearfix:after{ content: '';display: table;clear: both;} .clearfix{ *zoom:1;} </style>

> **总结**

这几种方法以“浮动与两侧皆自适应的流体布局”为最佳，因为它自适应强，可以不需要设置左右盒子的宽度，根据盒子内容来确定它们的排版。微博中采用这种方式可以实现盒子中个人头像大小替换，替换的同时并不会破坏网页的排版。

[20160401112357977]: /images/20220727/11e6556c14cd4a2297595add3f2f4540.png
[20160401113200636]: /images/20220727/d8b606cea0e944efb9cc9c85be5c4d36.png
[20160401113406825]: /images/20220727/42f1c1bd2c0b4b3bad8f4afb1a58ffa2.png
[20160401113825108]: /images/20220727/d65e4e27a6904428a28344548bab7712.png
[20160401114014061]: /images/20220727/4aaee59e42d24f00943460f37cb2b05d.png
[20160401114220562]: /images/20220727/286862a3c57a4623870f8aaadec3ec70.png

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关浮动布局

浮动： 1.浮动是布局的一种方式：也是元素脱离文档流的方式 2.浮动 float 3.浮动范围：只能在父容器内部浮动，

谁践踏了优雅/ 2023年06月12日 09:20/ 0 赞/ 18 阅读

相关浮动布局：浮动布局的特点，缺陷以及如何清除浮动

文章目录浮动布局 1. 认识浮动 2. 浮动特点 3. 浮动和inline-block 的区

末蓝、/ 2022年09月02日 13:54/ 0 赞/ 294 阅读

相关 CSS浮动，水平布局

浮动定义：属性名：float 属性值：none默认，left左浮动，right右浮动元素浮动之后，可以不用满足文档流中元素水平布局的等式，即：元素浮

妖狐艹你老母/ 2022年09月02日 04:27/ 0 赞/ 196 阅读

相关页面布局中常用的清除浮动的方法

因为在布局中碰到这个问题所以在网上查找了一些资料，布局时基本上都避免不了使用float，尤其是在容器高度不固定时，此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的，

青旅半醒/ 2022年08月13日 13:42/ 0 赞/ 157 阅读

相关浮动布局的方法（总结）

HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例）

电玩女神/ 2022年07月28日 08:55/ 0 赞/ 188 阅读

相关 html浮动布局

浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并

桃扇骨/ 2022年05月29日 12:56/ 0 赞/ 387 阅读

相关 CSS浮动和布局解决方法（一）

1. 在所有的需要布局的标签元素前面加上float ![在这里插入图片描述][70] 2. 在有布局的父元素取名后面加一个clearfix ![在这

Love The Way You Lie/ 2022年05月09日 10:33/ 0 赞/ 307 阅读

相关布局的核心之一：浮动

目录一、CSS的定位机制二、基本语法三、浮动特性及语法 1.块级元素并排排放 2.实质上：块级元素变成行内级元素 3、浮动特性以及注意事项 4、伪类选择器

朴灿烈づ我的快乐病毒、/ 2022年03月16日 01:16/ 0 赞/ 188 阅读

相关 div的浮动、清除浮动和布局

总结: 1.无序列表去除前面的小点点：list-style-type: none; 2.设置左浮动的间距。外边距：margin :如果设定4个值就是，上右下左的顺序设

川长思鸟来/ 2021年11月22日 08:06/ 0 赞/ 287 阅读

相关 css浮动布局总结

什么是浮动布局：浮动布局：默认流动布局有不足，让男标签可以并排显示如果一个元素浮动了，就相当于这个元素出国，就会产生影响：影响1：元素出国了，父元素里面就相

淡淡的烟草味﹌/ 2021年09月29日 16:42/ 0 赞/ 405 阅读