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.