清除浮动是什么意思（清除浮动）

你们好，最近小时发现有诸多的小伙伴们对于清除浮动是什么意思，清除浮动这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

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、 如你所见，前两个没有浮动，只有最后一个浮动在右边。

以上就是清除浮动这篇文章的一些介绍，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！