今天我们分享关于浮动布局的内容。HTML文档流：在学习浮动布局前，我们先来学习一下什么叫“正常文档流”，深入了解正常文档流，对后面学习浮动布局和定位布局是非常重要的前提。文档流，简单来说，就是元素在页面出现的先后顺序，正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按照从左至右的顺序依次排列。
| 块元素1 |
| 行内元素1 | 行内元素2 | 行内元素3 |
| 块元素2 |
| 行内元素5 | 行内元素5 | 行内元素6 |
| 块元素3 |
上面的HTML代码的文档流如下：
由于div，p，hr都是块元素，因此独占一行。而span，img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左至右排列。脱离正常文档流：脱离正常文档流是相对于正常文档流而言的。正常文档流就是我们没有使用CSS样式控制的HTML文档结构，按照你写的界面顺序展示。HTML代码如下：
效果如下：
脱离文档流就是指的显示位置和文档代码顺序不一致时，比如我们通过使用CSS样式代码，把最后一个div元素放置在最开始的位置。
在CSS布局中，我们可以使用浮动或者定位两种技术来实现脱离正常文档流，从而到达页面布局。浮动float：在前端开发中，我们可以使用属性float来到达灵活布局div元素的目的。浮动元素会生成一个块级框，而不论本身是何种元素。语法：
float:取值；
| float属性取值 |
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
默认情况下，元素是不浮动的。浮动的性质比较复杂，需要通过代码来让大家感受一下。示例代码：
float属性 #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; }
box1
box2
box3
我是浮动框外围的文字
上面代码定义了4个div块，一个是父元素，另外三个div是它的子元素。三个元素都没有设置浮动方式时，页面显示效果是4个盒子自上而下的排列的。设置第一个div浮动：
<html> <head> <title>float属性title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; }style> head> <body> <div id="father"> <div id="box1">box1div> <div id="box2">box2div> <div id="box3">box3div> <p>我是浮动框外围的文字p> div> body>html>
由于box1设置了左浮动，它就脱离了文档流，没有按照正常顺序显示了。设置第二个div浮动：
<html> <head> <title>float属性title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; } #box2 { float:left; }style> head> <body> <div id="father"> <div id="box1">box1div> <div id="box2">box2div> <div id="box3">box3div> <p>我是浮动框外围的文字p> div> body>html>
由于box2也设置了浮动元素，因为它也脱离了文档流。但是box1和box2之间为什么存在一定的距离呢？这是因为在CSS中，我们对box1、box2和box3都定义了外边距，浮动之后，外边距就生效了。设置第三个div浮动：
<html> <head> <title>float属性title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; } #box2 { float:left; } #box3 { float:left; }style> head> <body> <div id="father"> <div id="box1">box1div> <div id="box2">box2div> <div id="box3">box3div> <p>我是浮动框外围的文字p> div> body>html>
由于box3也变成了浮动元素，相邻的p元素就紧贴这box3，你会看到文字都环绕在旁边。float属性在CSS布局中是非常重要的技巧属性，我们通常会对div元素应用float浮动来进行页面布局，不但可以对整个版式进行，也可以对一些基本元素进行排列。浮动，这个属性对于初学者来说，掌握起来不容易，需要多练习，才能体会到其中的奥妙。
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
