今天我们分享关于浮动布局的内容。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浮动来进行页面布局,不但可以对整个版式进行,也可以对一些基本元素进行排列。浮动,这个属性对于初学者来说,掌握起来不容易,需要多练习,才能体会到其中的奥妙。
![bdacef7f4f8db7f9388ccd9b7ad6e9fe.png](https://i-blog.csdnimg.cn/blog_migrate/b0e6c6cd01732dd3d7478d5cc7220e2f.png)