Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to remove floats in css3". In daily operation, I believe many people have doubts about how to remove floats in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to remove floats in css3"! Next, please follow the editor to study!

The code is: 1, ".clear {clear:both}", stipulating that the element does not float around; 2, "overflow:auto", setting the content to be trimmed to clear the float; 3, "element: after {display:table;}", setting the element to be displayed in a block-level table, occupying the remaining space to clear the float.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the code to clear floats in css3

Method 1: use an empty element with a clear attribute

Clear the float with an empty tag: add an empty tag after all floating elements inside the parent element of the float need to be cleared (in theory, it can be any tag, but commonly used and

Clear the float and define the CSS code clear:both for it

Code example:

.demo {width: 500pxposition margin: 50px auto;background-color: # CCCCCC;} .left {width: 100pxposition height: 100px leftright: left;background-color: # 21B4BB;} .right {width: 100pxposition height: 50pxscape float: right;background-color: # 21B4BB;} .clear {clear:both;} float

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.

Method 2: 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: 500pxpolitics margin: 50px auto;background-color: # CCCCCC;overflow:hidden} .left {width: 100pxtHeights: 100pxpolitics floats: left;background-color: # 21B4BB;} .right {width: 100pxpolitical heights: 50pxWTH floats: right;background-color: # 21B4BB;} leftright

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.

Method 3: use the: after pseudo element of CSS

Use the: after pseudo element for the parent element to set the 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: 500pxbot margin: 50px auto;background-color: # CCCCCC;*zoom: 1;} .demo:after {content: "; display: table; clear: both;} .left {width: 100pxscape height: 100pxscape float: left;background-color: # 21B4BB;} .right {width: 100pxposition height: 50pxSingapore float: right;background-color: # 21B4BB;} leftright

Disadvantages: suitable for modern browsers, not supporting IE6/7,*zoom: 1 is for compatibility with IE6/7

At this point, the study on "how to remove floats in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.