float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用

92 阅读 0 评论 61 点赞

我是靠谱客的博主传统水壶，最近开发中收集的这篇文章主要介绍float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先看一下在w3c中对于float的解释
float被归类于CSS 定位属性（Positioning）
描述：规定框是否应该浮动。
定义和用法：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
默认值：none

属性值及描述：
left:元素向左浮动。
right:元素向右浮动。
none:默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit:规定应该从父元素继承 float 属性的值。

测试float属性之前，我们先得知道下页面布局的文档流
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

接下来我们开始看一下各个属性值的实际效果：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<input id="input1" type="text" value="input1">
<div id="div4">div4</div>
<input id="input2" type="text" value="input2">
<input id="input3" type="text" value="input3">
<input id="input4" type="text" value="input4">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

style.css

@charset "utf-8";
#div1{
width: 100px;
height: 50px;
background-color: red;
}
#div2{
width: 200px;
height: 50px;
background-color: green;
}
#div3{
width: 300px;
height: 50px;
background-color: black;
}
#div4{
width: 400px;
height: 50px;
background-color: blue;
}
#input1{
}
#input2{
}
#input3{
}
#input4{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果
这里写图片描述

现在开始测试

1. 块级元素的float属性

以float:left为例测试，float:right效果类似；

1.1. 测试下个紧邻元素是块级元素的效果；

1.1.1. 给div1添加属性：

效果
这里写图片描述

div1没什么变化，因为div1原本就靠在左边；div2占据了原理div1的位置，并且重合部分div1覆盖div2；
结论：当下个紧邻元素是块级元素时，块级元素设置float:left，当前元素靠左排列，下个紧邻的块级元素将占据当前元素空间，且重合部分当前元素覆盖下一元素；

1.2. 测试下个紧邻元素是内联元素的效果；

1.2.1. 给div3添加属性：

效果
这里写图片描述

div3还在原来的位置，但是input1紧贴在了他的右边，div4紧贴input1排列，div3与div4重合部分div3覆盖div4；
结论：当下个紧邻元素是内联元素时，块级元素设置float:left，当前元素靠左排列，下个紧邻的内联元素将不换行紧邻当前元素进行排列；

1.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

1.3.1. 给div1添加float:left;，div2添加float:left;

效果
这里写图片描述

div1和div2都靠左排列，div2排在div1的右边，div3消失了，其实不是消失了，div3在div1和div2的下面，被覆盖了；
结论：当下个紧邻元素是具有float:left;属性的块级元素时，块级元素设置float:left，当前元素与下个元素均靠左排列，同设float:left;属性的相邻块级元素按html中的先后顺序排列，下下元素的排列方式按1.1中的规则。

1.3.2. 给div1添加float:left;，div2添加float:right;

效果
这里写图片描述

div1靠左排列，div2靠右排列，div3与div1重合部分被div1覆盖了；
结论：当下个紧邻元素是具有float:right;属性的块级元素时，块级元素设置float:left，当前元素靠左排列，下个元素靠右排列，下下元素的排列方式按1.1中的规则。

1.3.3. 给div1添加float:left;，div2添加float:none;

效果
这里写图片描述

和1.1中的效果是一样的，这是因为float的默认值就是none；
结论：当下个紧邻元素是具有float:none;属性的块级元素时，当前元素设置float:left，与1.1中的排列规则一样

1.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

1.4.1. 给div3添加float:left;，input1添加float:left;

效果
这里写图片描述

div3和input1都靠左排列，input1排在div3的右边，div4在div3和input1的下面，被覆盖了；
结论：当下个紧邻元素是具有float:left;属性的内联元素时，块级元素设置float:left，当前元素与下个元素均靠左排列，同设float:left;属性的相邻元素按html中的先后顺序排列，下下元素的排列方式按2.1中的规则。

1.4.2. 给div3添加float:left;，input1添加float:right;

效果
这里写图片描述

div3靠左排列，input1靠右排列，div4与div3重合部分被div3覆盖了；
结论：当下个紧邻元素是具有float:right;属性的内联元素时，块级元素设置float:left，当前元素靠左排列，下个元素靠右排列，下下元素的排列方式按2.1中的规则。

1.4.3. 给div3添加float:left;，input1添加float:none;

效果
这里写图片描述

和1.2中的效果是一样的，这是因为float的默认值就是none；
结论：当下个紧邻元素是具有float:none;属性的内联元素时，当前元素设置float:left，与1.2中的排列规则一样

2. 内联元素的float属性

以float:left为例测试，float:right效果类似；

2.1. 测试下个紧邻元素是块级元素的效果；

2.1.1. input1添加属性

效果
这里写图片描述

input1靠左排列，div4占据了input1本来所占空间，并且重合部分input1覆盖div4。
结论：当下个紧邻元素是块级元素时，内联元素设置float:left，当前元素靠左排列，下个紧邻的块级元素将占据当前元素空间，且重合部分当前元素覆盖下一元素；

2.2. 测试下个紧邻元素是内联元素的效果；

2.2.1. input2添加属性

效果
这里写图片描述

input1靠左排列，input2紧邻input1排列。
结论：当下个紧邻元素是内联元素时，内联元素设置float:left，当前元素靠左排列，下个紧邻的块级元素将紧邻元素进行排列；

2.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

2.3.1. input1添加float:left;div4添加float:left;

效果
这里写图片描述

input1和div4靠左排列，input2紧邻div4不换行排列
结论：当下个紧邻元素是具有float:left;属性的块级元素时，内联元素设置float:left，当前元素与下个紧邻的块级元素靠左排列，下下个元素按1.2中的规则进行排列；

2.3.2. input1添加float:left;div4添加float:right;

效果
这里写图片描述

input1靠左排列，div4靠右排列，input2紧邻input1不换行排列；input3发生换行，这是因为宽度不够了，如果宽度够的话，input1，2，3，4都在一行；
结论：当下个紧邻元素是具有float:right;属性的块级元素时，内联元素设置float:left，当前元素靠左排列，下个紧邻的块级元素靠右排列；下下元素的排列按1.2和2.2中的规则排列；

2.3.3. input1添加float:left;div4添加float:none;

效果
这里写图片描述

与2.1中的效果是一样的
结论：当下个紧邻元素是具有float:none;属性的块级元素时，当前元素设置float:left，与2.1中的排列规则一样

2.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

2.4.1. input2添加float:left;input3添加float:left;

效果
这里写图片描述

input2和input3靠左排列，input4紧邻input3不换行排列
结论：当下个紧邻元素是具有float:left;属性的内联元素时，内联元素设置float:left，当前元素与下个紧邻的块级元素靠左排列，下下个元素按2.2中的规则进行排列；

2.4.2. input3添加float:left;input3添加float:right;

效果
这里写图片描述

input2靠左排列，input3靠右排列，input4紧邻input2不换行排列；
结论：当下个紧邻元素是具有float:right;属性的内联元素时，内联元素设置float:left，当前元素靠左排列，下个紧邻的块级元素靠右排列；下下元素的排列按1.2中的规则排列；

2.4.3. input2添加float:left;input3添加float:none;

效果
这里写图片描述

与2.2中的效果是一样的
结论：当下个紧邻元素是具有float:none;属性的内联元素时，当前元素设置float:left，与2.2中的排列规则一样

3. float：inherit效果

3.1. 块级元素继承父类float

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="out">
<div id="in">
div_in
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

style2.css

@charset "utf-8";
#out{
width: 300px;
height: 300px;
background-color: red;
}
#in{
width: 100px;
height: 100px;
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

3.1.1. 父类中设置float：right，子类设置float：inherit

效果
这里写图片描述

可以看到父类和子类同时具有了float：right属性。
结论：当当前块级元素设置float:inherit;属性时，当前元素将获得与父类相同的float属性。

3.1.2. 父类中设置float：right，子类设置float：none

效果
这里写图片描述

可以看到父类和子类同时具有了float：right属性。
结论：当当前块级元素设置float:none’;属性时，当前元素将冲突掉本应该继承父类的float属性。

3.2. 块级元素继承父类float

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="out">
<input id="in" type="text" value="input_in">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

style2.css

@charset "utf-8";
#out{
width: 300px;
height: 300px;
background-color: red;
}
#in{
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

3.2.1. 父类中设置float：right，子类设置float：inherit

效果
这里写图片描述

可以看到父类和子类同时具有了float：right属性。
结论：当当前块级元素设置float:inherit;属性时，当前元素将获得与父类相同的float属性。

3.2.2. 父类中设置float：right，子类设置float：none

效果
这里写图片描述

可以看到父类和子类同时具有了float：right属性。
结论：当当前块级元素设置float:none’;属性时，当前元素将冲突掉本应该继承父类的float属性。

3.clear属性的使用

从上面的这些例子可以看到float的使用还是比较乱的，因为它破坏了原本的文档流，不仅仅影响了元素本身，还影响到了相邻的下一元素。
这是我们可以使用clear来去除float对于其他元素的影响。
clear 属性规定元素的哪一侧不允许其他浮动元素。
默认值：none
其它值及描述：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

这里就不测试了，基本上都是设置取消相邻的浮动元素对其的影响。

最后

以上就是传统水壶为你收集整理的float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用的全部内容，希望文章能够帮你解决float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：web
浏览次数：92 次浏览
发布日期：2023-11-13 23:45:05
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_14_fz_13_zcy.html

float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用

概述

1. 块级元素的float属性

1.1. 测试下个紧邻元素是块级元素的效果；

1.1.1. 给div1添加属性：

1.2. 测试下个紧邻元素是内联元素的效果；

1.2.1. 给div3添加属性：

1.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

1.3.1. 给div1添加float:left;，div2添加float:left;

1.3.2. 给div1添加float:left;，div2添加float:right;

1.3.3. 给div1添加float:left;，div2添加float:none;

1.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

1.4.1. 给div3添加float:left;，input1添加float:left;

1.4.2. 给div3添加float:left;，input1添加float:right;

1.4.3. 给div3添加float:left;，input1添加float:none;

2. 内联元素的float属性

2.1. 测试下个紧邻元素是块级元素的效果；

2.1.1. input1添加属性

2.2. 测试下个紧邻元素是内联元素的效果；

2.2.1. input2添加属性

2.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

2.3.1. input1添加float:left;div4添加float:left;

2.3.2. input1添加float:left;div4添加float:right;

2.3.3. input1添加float:left;div4添加float:none;

2.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

2.4.1. input2添加float:left;input3添加float:left;

2.4.2. input3添加float:left;input3添加float:right;

2.4.3. input2添加float:left;input3添加float:none;

3. float：inherit效果

3.1. 块级元素继承父类float

3.1.1. 父类中设置float：right，子类设置float：inherit

3.1.2. 父类中设置float：right，子类设置float：none

3.2. 块级元素继承父类float

3.2.1. 父类中设置float：right，子类设置float：inherit

3.2.2. 父类中设置float：right，子类设置float：none

3.clear属性的使用

最后

评论列表共有 0 条评论

发表评论取消回复

float 效果AND原理解析 1. 块级元素的float属性 2. 内联元素的float属性 3. float：inherit效果 3.clear属性的使用

概述

1. 块级元素的float属性

1.1. 测试下个紧邻元素是块级元素的效果；

1.1.1. 给div1添加属性：

1.2. 测试下个紧邻元素是内联元素的效果；

1.2.1. 给div3添加属性：

1.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

1.3.1. 给div1添加float:left;，div2添加float:left;

1.3.2. 给div1添加float:left;，div2添加float:right;

1.3.3. 给div1添加float:left;，div2添加float:none;

1.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

1.4.1. 给div3添加float:left;，input1添加float:left;

1.4.2. 给div3添加float:left;，input1添加float:right;

1.4.3. 给div3添加float:left;，input1添加float:none;

2. 内联元素的float属性

2.1. 测试下个紧邻元素是块级元素的效果；

2.1.1. input1添加属性

2.2. 测试下个紧邻元素是内联元素的效果；

2.2.1. input2添加属性

2.3. 测试下个紧邻元素是具有float属性的块级元素的效果；

2.3.1. input1添加float:left;div4添加float:left;

2.3.2. input1添加float:left;div4添加float:right;

2.3.3. input1添加float:left;div4添加float:none;

2.4. 测试下个紧邻元素是具有float属性的内联元素的效果；

2.4.1. input2添加float:left;input3添加float:left;

2.4.2. input3添加float:left;input3添加float:right;

2.4.3. input2添加float:left;input3添加float:none;

3. float：inherit效果

3.1. 块级元素继承父类float

3.1.1. 父类中设置float：right，子类设置float：inherit

3.1.2. 父类中设置float：right，子类设置float：none

3.2. 块级元素继承父类float

3.2.1. 父类中设置float：right，子类设置float：inherit

3.2.2. 父类中设置float：right，子类设置float：none

3.clear属性的使用

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复