Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use clear to clear floats in Dreamweaver

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report