Home > Developer > JavaScript
Some Understanding of floating and floating
I wrote a blog for the first time. I don't know what to write, and I have never written it before. Therefore, please forgive me for not writing well.
After learning CSS floating, the so-called floating is to make the text and image have some surround effect, it means that after using the floating float attribute, detaches floating elements from normal document streams. In normal document streams, div is a block-level element that excludes a single line. If div is left side by side without floating, you can only use the positioning position (not to mention it for the moment ).
To display div elements side by side, you must use the floating attribute. Because div is a block-level element that occupies an exclusive row, if you do not use floating, it is arranged in the regular stream order, as shown in:
If you want to display div1, div2, and div3 side by side, you must use float.
This is the case. Why? Because div1 is out of the regular stream arrangement and layout after it floats, div2 removes the elements by default and occupies the div1 position, div1 is floating, so only a small part of div2 can be seen, and the rest is covered by the floating div1.
To display the three divs side by side, you only need to float them. However, after floating, it will have some impact on the layout elements behind it, here we will mainly introduce several methods to clear floating influences.
Method 1: Use the clear attribute.
Add an empty div next to the floating element.
Method 2: add the overflow attribute to the parent element.
<!DOCTYPE html>By adding the overflow attribute to the parent element, the floating effect can be cleared.
Method 3: use pseudo objects after and before.
.clearFix:after{ clear:both; display:block; visibility:hidden; height:0; line-height:0; content:"."; }<div class="clearFix"></div>This method is commonly used on the Internet.
The above is the method I have learned about removing the influence of float. If there is an incomplete induction, I hope you will understand it after all.
This is a description of w3school floating: http://www.w3school.com.cn/css/css_positioning_floating.asp
For reference only.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
