东方时讯网
你们好，最近小时发现有诸多的小伙伴们对于清除浮动的三种方式，清除浮动这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 首先，我们来看一下将float的值设置为none的效果来说明问题。这里有两个新的div块，一个红色背景，另一个蓝色背景。具体代码如下：
2、 html
3、 head
4、 TitleCSS浮动和结算/title
5、 style
6、 .divcss1{
7、 background-color:red;
8、 height:100px;
9、 width:100px;
10、 }
11、 .divcss2{
12、 background-color:blue;
13、 height:100px;
14、 width:100px;
15、 }
16、 /style
17、 /head
18、 body
19、 div class='divcss1'/div
20、 div class='divcss2'/div
21、 /body
22、 /html
23、 您可以看到红色块和蓝色块没有显示在一行中，尽管有足够的空间来显示它们。
24、 从上面的例子我们可以看到，默认的效果是两个块不会显示在一行上。如果想让这两个区块显示在一行上，应该怎么做？可以用浮点来完成工作。具体代码如下：
25、 html
26、 head
27、 TitleCSS浮动和结算/title
28、 style
29、 .divcss1{
30、 background-color:red;
31、 height:100px;
32、 width:100px;
33、 float:left;
34、 }
35、 .divcss2{
36、 background-color:blue;
37、 height:100px;
38、 width:100px;
39、 float:left;
40、 }
41、 /style
42、 /head
43、 body
44、 div class='divcss1'/div
45、 div class='divcss2'/div
46、 /body
47、 /html
48、 可以看到div1和div2在同一条线上。
49、 除了设置左浮动，还可以设置右浮动。在这里，我添加了一个绿色框。具体代码如下：
50、 html
51、 head
52、 TitleCSS浮动和结算/title
53、 style
54、 .divcss1{
55、 background-color:red;
56、 height:100px;
57、 width:100px;
58、 float:left;
59、 }
60、 .divcss2{
61、 background-color:blue;
62、 height:100px;
63、 width:100px;
64、 float:right;
65、 }
66、 .divcss3{
67、 background-color:green;
68、 height:200px;
69、 width:100px;
70、 float:left;
71、 }
72、 /style
73、 /head
74、 body
75、 div class='divcss1'/div
76、 div class='divcss2'/div
77、 div class='divcss3'/div
78、 /body
79、 /html
80、 你可以看到设置的蓝色块是否自动向右，虽然代码写在第二个位置。
81、 那么第三个清除浮动长什么样呢？
82、 html
83、 head
84、 TitleCSS浮动和结算/title
85、 style
86、 .divcss1{
87、 background-color:red;
88、 height:100px;
89、 width:100px;
90、 float:left;
91、 }
92、 .divcss2{
93、 background-color:blue;
94、 height:100px;
95、 width:100px;
96、 float:right;
97、 }
98、 .divcss3{
99、 background-color:green;
100、 height:200px;
101、 width:100px;
102、 clear:left;
103、 }
104、 /style
105、 /head
106、 body
107、 div class='divcss1'/div
108、 div class='divcss2'/div
109、 div class='divcss3'/div
110、 /body
111、 /html
112、 你能看到第三个绿色方块中的这个自动转到下一行吗？
113、 除了不允许左浮动，还可以设置不允许右浮动。具体代码如下：
114、 html
115、 head
116、 TitleCSS浮动和结算/title
117、 style
118、 .divcss1{
119、 background-color:red;
120、 height:100px;
121、 width:100px;
122、 float:left;
123、 clear:right;
124、 }
125、 .divcss2{
126、 background-color:blue;
127、 height:100px;
128、 width:100px;
129、 float:right;
130、 }
131、 .divcss3{
132、 background-color:green;
133、 height:200px;
134、 width:100px;
135、 }
136、 /style
137、 /head
138、 body
139、 div class='divcss1'/div
140、 div class='divcss2'/div
141、 div class='divcss3'/div
142、 /body
143、 /html
144、 具体效果如下图所示。你可以看到div1禁止它在右边浮动。
145、 还可以设置禁止左右浮动。具体代码如下：
146、 html
147、 head
148、 TitleCSS浮动和结算/title
149、 style
150、 .divcss1{
151、 background-color:red;
152、 height:100px;
153、 width:100px;
154、 float:left;
155、 clear:both;
156、 }
157、 .divcss2{
158、 background-color:blue;
159、 height:100px;
160、 width:100px;
161、 clear:both;
162、 }
163、 .divcss3{
164、 background-color:green;
165、 height:200px;
166、 width:100px;
167、 float:right;
168、 }
169、 /style
170、 /head
171、 body
172、 div class='divcss1'/div
173、 div class='divcss2'/div
174、 div class='divcss3'/div
175、 /body
176、 /html
177、 如你所见，前两个没有浮动，只有最后一个浮动在右边。
以上就是清除浮动这篇文章的一些介绍，希望对大家有所帮助。