How to use clear to clear floats in Dreamweaver

This article is about how to use clear to clear floats in Dreamweaver. I think it is very practical, so I share it with you. I hope you can get something after reading this article.

1. Open Dreamweaver to create a new html document, and enter the content in body

01020304

2. Add attribute values to the added div, as shown in the figure, and add different colors as the background

Div:nth-child (1) {background-color:red;} div:nth-child (2) {background-color:green;} div:nth-child (3) {background-color:blue;} div:nth-child (4) {background-color:gray;}

3. Add floating effect float:left to the first div

4. Preview the viewing effect in the browser as shown in the figure. You can see that only the floating effect has been added to the first div, while the second div below has also been affected.

5. So in order to prevent the second one from being affected, add a clear float to it, because the first one adds a floating left to the left, so if you clear the floating effect of the second, you can add a clear floating clear:left to the left.

6. If you are not sure which direction to add the clear attribute, you can set clear:both; to clear regardless of left or right, and the effect is the same as shown in the figure.

7. Add a float to the right of the third div, if the float:right shown

8. For the third div float, the fourth div is affected, so add a clear float to the fourth div.

The above is how to use clear to clear floats in Dreamweaver. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.