Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.