本篇文章主要介绍了"cssfloat CSS Float布局过程与老生常谈的三栏布局"，主要涉及到cssfloat方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSf...

使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博文，就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局。

DIV的特点

布局的基本HTML元素div，有这么几个特点，会影响到后面进行的布局。注意，下面的特点仅适用于没有指定width属性和height属性的div，因为在用float进行布局的过程中，我们只有在特定的位置（后面会详述）才这么做。

•空的div是没有高度的。
•有内容的div其高度取决于内容的高度。
•如果没有指定float属性，div的宽度将和占满父元素的宽度（不管是不是空的）。
•如果指定了float属性，div的宽度将取决于内部元素的宽度（所以，空的div指定了float属性后既没有高度也没有宽度）。
网上的很多jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播，经常指定了div的宽度或高度，然后讲解float属性，这对我学习布局确实产生了很大干扰。记住，只有在特定的位置，我们才会指定div的宽度。

Float布局的过程

在实践过程中，我领悟到一点，那就是，div是按照在HTML文档中的顺序进行渲染的。也就是说，我们先决定前一个div在页面上的位置，然后再决定后一个div的位置。也许这一点是显而易见的，但它确实是理解Float布局的关键，网上其他jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播里很少有提及。

有下面这样的HTML文档

复制代码

一共5个div，为了使这些div具有高度和宽度，向其中添加了一些文字。现在还没有任何float属性，所以每个div都占满了整个父元素的宽度，而高度由其中的内容决定。渲染效果如下：

当一个元素具有float属性时，浏览器会怎样做？我想是这样的：

1.渲浏览器探测到这个元素具有float:right属性，
2.根据其内容限制了div的宽度（而不是尽量占满父元素宽度）
3.脱离文档流，并选择这样的位置进行渲染：
 1.首先要在文档流没有占领的区域，否则就有可能覆盖已经渲染的文档。
 2.其次，也没有其他float元素。
 3.最后，渲染之后不会影响文档流。文档流该怎么走还怎么走，但是文档中的内容会自动绕开float元素。
试着将div#sidebar设置float:left属性：

复制代码

#sidebar{
float: right;
}

侧边栏没有浮动到标题栏上，即使标题栏右侧没有文字。这是因为标题栏的渲染在侧边栏之前进行，浏览器渲染完标题栏后已经忘了标题栏右侧有没有内容了，所以不能冒着覆盖原来的内容的风险将侧边栏浮动到标题栏上。接着，文档流该怎么渲染还是怎么渲染，除了其中文字绕开浮动元素，就好像浮动元素不存在一样。

我们希望侧边栏2在页面左侧，侧边栏1在页面右侧。因为侧边栏2中内容很多，所以需要限定宽度。为了美观，同时限定1的宽度，并对侧边栏2赋float属性。

复制代码

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 180px;
}

有点像一个三栏布局的样子了。但我们通常不希望中栏高于侧边栏时，延伸到侧边栏下方。这时通常使用的技巧就是给中栏带margin属性，左右的值就是两个侧边栏的值。

复制代码