How to use the overflow property of CSS
Most people do not understand the knowledge points of this article "how to use the overflow attributes of CSS", so the editor summarizes the following contents, detailed contents, clear steps, and certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use the overflow attributes of CSS" article.
1. Clear the float and define the CSS code clear:both for it
Code example:
.demo {
Width: 500px
Margin: 50px auto
Background-color: # CCCCCC
}
.left {
Width: 100px
Height: 100px
Float: left
Background-color: # 21B4BB
}
.right {
Width: 100px
Height: 50px
Float: right
Background-color: # 21B4BB
}
.clear {
Clear:both
}
Advantages: simple, less code, good browser compatibility.
Disadvantages: need to add a large number of non-semantic html elements, the code is not elegant enough, not easy to maintain later.
two。 Use the overflow property of CSS
Use overflow to clear floats: simply define the CSS code overflow:auto or overflow:hidden in the element where you need to clear floats.
Code example:
.demo {
Width: 500px
Margin: 50px auto
Background-color: # CCCCCC
Overflow:hidden
}
.left {
Width: 100px
Height: 100px
Float: left
Background-color: # 21B4BB
}
.right {
Width: 100px
Height: 50px
Float: right
Background-color: # 21B4BB
}
Advantages: there are no structural and semantic problems, and there is very little code
Disadvantages: when the content increases, it is easy to avoid automatic line wrapping, resulting in the content being hidden and unable to show the elements that need to be overflowed.
3. Use the: after pseudo element of CSS
Use: after pseudo element for parent element, set display:table
Display:table causes the generated elements to be displayed as a block-level table, taking up the remaining space.
Generate the content as the last element through content: ". As for anything in content, the classic CSS is content:". Some versions may have empty content in content.
Code example:
.demo {
Width: 500px
Margin: 50px auto
Background-color: # CCCCCC
* zoom: 1
}
.demo: after {
Content: ""
Display: table
Clear: both
}
.left {
Width: 100px
Height: 100px
Float: left
Background-color: # 21B4BB
}
.right {
Width: 100px
Height: 50px
Float: right
Background-color: # 21B4BB
}
Disadvantages: suitable for modern browsers, not supporting IE6/7,*zoom: 1 is for compatibility with IE6/7
The above is about the content of this article on "how to use the overflow properties of CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
