首页 >> 动态 >

清除浮动有哪些方式（清除浮动）

2023-11-24 10:30:29 来源：用户：

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

1、首先我们来看看将float设置值为none的时候的效果来说明问题，这里新建两个div块，一个背景为红色一个背景为蓝色，具体代码如下：

2、<html>

3、 <head>

4、 <title>CSS浮动和清除</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、 <title>CSS浮动和清除</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、 <title>CSS浮动和清除</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、 <title>CSS浮动和清除</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、 <title>CSS浮动和清除</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、 <title>CSS浮动和清除</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、可以看到，前面两个都没有浮动，只有最后一个右边浮动了。

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

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