浮动布局-CSS入门基础（023）

最新推荐文章于 2024-03-21 19:18:07 发布

虾米大王

最新推荐文章于 2024-03-21 19:18:07 发布

阅读量279

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111739503

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于浮动布局的内容。

HTML文档流：

在学习浮动布局前，我们先来学习一下什么叫“正常文档流”，深入了解正常文档流，对后面学习浮动布局和定位布局是非常重要的前提。

文档流，简单来说，就是元素在页面出现的先后顺序，正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按照从左至右的顺序依次排列。

块元素1
行内元素1	行内元素2	行内元素3
块元素2
行内元素5	行内元素5	行内元素6
块元素3

上面的HTML代码的文档流如下：

<div></div><span></span><span></span><span></span><p></p><span></span><img><span></span><hr>

由于div，p，hr都是块元素，因此独占一行。而span，img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左至右排列。

脱离正常文档流：

脱离正常文档流是相对于正常文档流而言的。正常文档流就是我们没有使用CSS样式控制的HTML文档结构，按照你写的界面顺序展示。

HTML代码如下：

<div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div>

效果如下：

div1

div2

div3

div4

div5

脱离文档流就是指的显示位置和文档代码顺序不一致时，比如我们通过使用CSS样式代码，把最后一个div元素放置在最开始的位置。

div5

div1

div2

div3

div4

在CSS布局中，我们可以使用浮动或者定位两种技术来实现脱离正常文档流，从而到达页面布局。

浮动float：

在前端开发中，我们可以使用属性float来到达灵活布局div元素的目的。浮动元素会生成一个块级框，而不论本身是何种元素。

语法：

float:取值；

float属性取值
属性值	说明
left	元素向左浮动
right	元素向右浮动

默认情况下，元素是不浮动的。浮动的性质比较复杂，需要通过代码来让大家感受一下。

示例代码：

<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;      }    </style>  </head>  <body>    <div id="father">      <div id="box1">box1</div>      <div id="box2">box2</div>      <div id="box3">box3</div>      <p>我是浮动框外围的文字</p>    </div>  </body></html>

上面代码定义了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">box1</div>      <div id="box2">box2</div>      <div id="box3">box3</div>      <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">box1</div>      <div id="box2">box2</div>      <div id="box3">box3</div>      <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">box1</div>      <div id="box2">box2</div>      <div id="box3">box3</div>      <p>我是浮动框外围的文字</p>    </div>  </body></html>