CSS: Clear floating-Use: Overflow

Source: Internet
Author: User

when using Div + CSS layout one of the common problems we face is that the packaging container does not expand to the height of floating elements of sub-elements. you can use the overflow attribute to solve this problem? This is not a new CSS technique. today, I want to pick up start with these tips.

Demo address:Http://webdesignerwall.com/demo/clear-float/

Demonstration 1:

The floating child elements shown in the following demo do not automatically adapt to the height of the parent container.To solve this problem, you can simply add a packaging container with the CSS Attribute Overflow: auto (or overflow: hidden.This is perhaps the easiest way to clear floating.

. Container{
Overflow:Auto;
}


Demonstration 2:

Overflow: auto can also be used to prevent contents encapsulated from floating elements.For example, you are designing a comment list.You will most likely have an avatar, floating on the left, comment on the right.To prevent comments surrounded by portraits, you only need to add the overflow: hidden comment container.The advantage of using overflow is that I didn't set a float or width for the comment container.The container automatically calibrate the floating Avatar image.

. Image{
Float:Left;
}

. Text{
Overflow:Hidden;
}
Disadvantages (see Demo )

Although it is a good techniqueYesDisadvantages:

    • Using overflow: auto will create a scroll bar if your content is to extend the boundary of the container.For example, if you have a long unbreaking text (that is, long URL text) or a large image, it is larger, then the container will scroll.
    • To avoid a scrolling display, you should use overflow: hidden.However,This methodAlsoThere isDisadvantages.Use overflow: hidden to hide any content beyond the container's boundary.
Word-wrap

To solve the big text problem, you only need to add word-wrap: Break-Word to the container, which forces the text to wrap to a new line.

. Container{
Word-wrap:Break-word;
}
Max-Width

To prevent the image from expanding beyond the container boundary, the added Max-width: 100% adjusts the image size to the maximum width of the container.

 
. Container img{
Max-Width:100%;
Height:Auto;
}

English version: CCSS: Clearing floats with overflow | webdesignerwall

Translation:CSS: Clear floating-Use: overflow | Meng Chen

Author: Meng Chen
Source: http://www.cnblogs.com/xiaoyao2011/
You are welcome to reprint it in any form, but be sure to indicate the source.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.