Web Front-end
HTML Tutorial
css general small notes 02?? Float, clear (three examples)_html/css_WEB-ITnose
css general small notes 02?? Float, clear (three examples)_html/css_WEB-ITnose
Floating and clearing are usually used in CSS, which is also a knowledge point that must be mastered. I won’t say much about conceptual things. Here are a few examples to illustrate its usage: 1. Text Surrounding effect 2. Display multiple divs side by side 3. Clear floating (default display)
-. Text wrapping effect:
The html code is as follows:
1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big"> 8 <span>广告浮动效果:</span> 9 <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>10 </div>11 12 </body>Explanation: Float the img tag directly to the left, and the effect of text surrounding the image will appear. The function of padding: 10px; is to set the difference between the image and text. distance, the running effect is as follows (remember to modify the image path yourself):
2. Display multiple divs side by side
The html code is as follows:
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;} 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>The above code displays as follows:
It can be seen from the picture that the three divs are not displayed side by side, but displayed vertically. This is the default display method. And if you want to display them side by side, you only need to add a sentence to the above code,
#big div {width: 100px; height: 100px; float: left;} and then the display effect is as follows:
3. Clear floating
There is the following html code:
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;float: left;}//注意这里的第一个div是左浮动； 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>From As can be seen from the second example, if both div2 and div3 are set to float: left; the three divs will be displayed side by side. Pay attention to the above code. The first div is left floating, but the next two divs are not floated. What is the running effect? As shown in the picture below:
As you can see from the picture, div2 is missing. Why is this? Because div1 is set to float left, div2 will display from the first position by default, so div1 covers div2, and div3 continues to display from div2, so this results in such a result. So how to restore the default display? This requires clearing the floats and modifying the code .div2 {background: yellow;clear:left;} and it will be ok. The effect is as follows:
div2 appears again. This is the function of clearing floats. The clear attribute has three values: left, right, and both. As the name suggests, you already know what it means. I don’t know much about it. Said.
That’s it for the three examples. I hope it will be helpful to everyone. Any questions are welcome to discuss.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to Download Drivers for Universal PnP Monitors: 5 Ways
Apr 21, 2023 pm 08:55 PM
If you have recently upgraded to Windows 10 or Windows 11, you may need to download a universal PnP monitor driver on your PC. Therefore, we have come up with a tutorial that will tell you more about Universal PnP Monitor and some quick ways to download and install Universal PnP Drivers on Windows. You may need to download drivers for most monitor brands, including the AcerGenericPnP monitor driver. When looking for monitor types in Device Manager or under the Monitors tab of the display adapter properties, you may notice Generic PnP Monitor. Chances are you'll find it in dual-monitor setups on both laptops and desktops. Down
How to clear desktop background recent image history in Windows 11
Apr 14, 2023 pm 01:37 PM
<p>Windows 11 improves personalization in the system, allowing users to view a recent history of previously made desktop background changes. When you enter the personalization section in the Windows System Settings application, you can see various options, changing the background wallpaper is one of them. But now you can see the latest history of background wallpapers set on your system. If you don't like seeing this and want to clear or delete this recent history, continue reading this article, which will help you learn more about how to do it using Registry Editor. </p><h2>How to use registry editing
How to delete Xiaohongshu notes
Mar 21, 2024 pm 08:12 PM
How to delete Xiaohongshu notes? Notes can be edited in the Xiaohongshu APP. Most users don’t know how to delete Xiaohongshu notes. Next, the editor brings users pictures and texts on how to delete Xiaohongshu notes. Tutorial, interested users come and take a look! Xiaohongshu usage tutorial How to delete Xiaohongshu notes 1. First open the Xiaohongshu APP and enter the main page, select [Me] in the lower right corner to enter the special area; 2. Then in the My area, click on the note page shown in the picture below , select the note you want to delete; 3. Enter the note page, click [three dots] in the upper right corner; 4. Finally, the function bar will expand at the bottom, click [Delete] to complete.
Can deleted notes on Xiaohongshu be recovered?
Oct 31, 2023 pm 05:36 PM
Notes deleted from Xiaohongshu cannot be recovered. As a knowledge sharing and shopping platform, Xiaohongshu provides users with the function of recording notes and collecting useful information. According to Xiaohongshu’s official statement, deleted notes cannot be recovered. The Xiaohongshu platform does not provide a dedicated note recovery function. This means that once a note is deleted in Xiaohongshu, whether it is accidentally deleted or for other reasons, it is generally impossible to retrieve the deleted content from the platform. If you encounter special circumstances, you can try to contact Xiaohongshu’s customer service team to see if they can help solve the problem.
What should I do if the notes I posted on Xiaohongshu are missing? What's the reason why the notes it just sent can't be found?
Mar 21, 2024 pm 09:30 PM
As a Xiaohongshu user, we have all encountered the situation where published notes suddenly disappeared, which is undoubtedly confusing and worrying. In this case, what should we do? This article will focus on the topic of "What to do if the notes published by Xiaohongshu are missing" and give you a detailed answer. 1. What should I do if the notes published by Xiaohongshu are missing? First, don't panic. If you find that your notes are missing, staying calm is key and don't panic. This may be caused by platform system failure or operational errors. Checking release records is easy. Just open the Xiaohongshu App and click "Me" → "Publish" → "All Publications" to view your own publishing records. Here you can easily find previously published notes. 3.Repost. If found
How to connect Apple Notes on iPhone in the latest iOS 17 system
Sep 22, 2023 pm 05:01 PM
Link AppleNotes on iPhone using the Add Link feature. Notes: You can only create links between Apple Notes on iPhone if you have iOS17 installed. Open the Notes app on your iPhone. Now, open the note where you want to add the link. You can also choose to create a new note. Click anywhere on the screen. This will show you a menu. Click the arrow on the right to see the "Add link" option. click it. Now you can type the name of the note or the web page URL. Then, click Done in the upper right corner and the added link will appear in the note. If you want to add a link to a word, just double-click the word to select it, select "Add Link" and press
How to add product links in notes in Xiaohongshu Tutorial on adding product links in notes in Xiaohongshu
Mar 12, 2024 am 10:40 AM
How to add product links in notes in Xiaohongshu? In the Xiaohongshu app, users can not only browse various contents but also shop, so there is a lot of content about shopping recommendations and good product sharing in this app. If If you are an expert on this app, you can also share some shopping experiences, find merchants for cooperation, add links in notes, etc. Many people are willing to use this app for shopping, because it is not only convenient, but also has many Experts will make some recommendations. You can browse interesting content and see if there are any clothing products that suit you. Let’s take a look at how to add product links to notes! How to add product links to Xiaohongshu Notes Open the app on the desktop of your mobile phone. Click on the app homepage
How to clear protection history in Windows 11: 2 methods
Apr 23, 2023 am 08:04 AM
When your PC is running out of storage space, you can instantly view many folders to free up space. One that consumes a lot is Windows Defender protection history, but can you clear it in Windows 11? Although not entirely necessary, deleting protection history can actually help clear some storage space on your system. For some users, these files take up 20-25GB of space, which can be daunting if your computer is low on storage space. So, let’s find out what protection history is, all the ways to clear it in Windows 11, and how to configure it to clear automatically after a set time. What is historical preservation? M
