浮动布局（float）_dw的float方式布局的代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_51047154/article/details/115829189

浮动布局（float）

一.HTML文档流

1.正常文档流动

在进行布局之前我们当然要先来了解一下未布局的正常文档流是什么样子，再通过对正常文档流的调整来达到布局的目的。
HTML文档流简单的来说就是元素在页面中出现的先后顺序。
正常文档流将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在行内按从左到右依次排列元素。

             
</style>
<body>
<div class="box1">box1</div> 
<p class="box2">box2</p>
<ul class="box3">box3</ul>
<div class="box4">box4</div>
|<span>我是行内元素1</span>
|<span>我是行内元素2</span>
|<span>我是行内元素3</span>|
</body>
</html>

正常文档流效果图：

分析：

div、p、ul是块元素，独占一行，根据书写的顺序，自上而下依次排列。
span是行内元素，位于同一行，根据书写的顺序，自左向右依次排列。

b.脱离正常文档流

当我们用CSS样式去控制HTML文档结构时，此时的文档流相对于正常文档流而言脱离正常文档流

脱离正常文档流效果图：

分析：

由图可知该由于CSS的控制使得文档显示效果与与文档代码顺序不一致，我们称之为脱离正常文档流

二.浮动（float）

1.介绍:

在很长一段时间内，浮动元素是所有Web布局方案的基础。但浮动‘其实不是为布局而生的。与使用表格布局基本一样，把浮动作为布局工具算是无奈之举。
然而浮动自身却是相当有趣和有用的,下面我们正式进入浮动的讲解

2.内容精讲：

float

取值	left、right、none
初始值	none
适用于	所有元素

a.浮动的元素

浮动元素后要注意几件事。
首先在某种程度上讲，浮动的元素脱离了常规文档流不过对布局仍有影响。
使用CSS浮动元素的独特之处是，浮动的元素基本上算是处于单独的平面上，但是对文档中其余的内容仍有影响之所以这样，是因为元素浮动后其他内容围绕它流动（文字环绕图片）。浮动的图像就是这样，不过即使浮动段落也是如此。

/*使图片向左浮动*/
 img{
    float:left;
  }

分析：

由图可知图片向左浮动后脱离了常规文档流并且其他的内容围绕它流动

注意：

如果与图像相邻的其他元素也有外边距，那么这些外边距不会与浮动图像的外边距折叠在一起

b.浮动的详解：

浮动元素的容纳块是最近的块级祖辈元素（大家先记住即可）

<div class="box1">
<p>
<li>I want to be better!</li>
</p>
</div>

在上述标记中浮动元素的容纳块是其所在的段落元素p

1.元素浮动后变为块级框

不论是什么类型的元素，浮动后得到的都是块级框。因此如果浮动的如果是连接，即使元素自身正常情况下生成的是行内框，浮动后生成的也是块级框。

在布局中浮动元素除了不独占一行就像div元素一样。这与为浮动元素声明display：block效果没什么不同；

2.浮动元素的左（右）外边界不能超过容纳块的左（右）内边界

<body>
<div class="box">
<div class="box1">box1</div> 
<p class="box2">box2</p>
<ul class="box3">box3</ul>
<div class="box4">box4</div>
 box
</div>
</body>

让box3向左浮动，box4向右浮动（原始位置参考上方正常文档流效果图）

分析：

由图可知向左浮动的box3最多只能到达容纳块box的左内边界，向右浮动的box4最多只能到达容纳块的右内边距

3.避免浮动的元素重叠

情况1：

如果文档源码中处于前面的元素向左浮动，那后面的浮动元素的左外边界必定在前一个元素右边界的左侧（除非浮动后后面的元素在前面元素的底下）
同理如果文档中处于前面的元素向右浮动，后面的浮动元素的右外边界必定在前一个元素左外边界的左侧
（除非浮动后后面的元素在前面元素的底下）

<body>
<div class="box">
<div class="box1">box1</div> 
<p class="box2">box2</p>
<ul class="box3">box3</ul>
<div class="box4">box4</div>
 box
</div>
</body>

让box1、box2向左浮动，box3、box4向右浮动