HTML code
1 <Body>2 < Section>3 <imgsrc= "Sea.png"alt= "Sea">4 <P>Picture Title</P>5 </ Section>6 <Footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodTempor incididunt ut labore et dolore magna Aliqua.</Footer>7 </Body>
CSS Code
1 P{2 margin:0;3}4 img{5 float: Left;6}7 Section{8 Border:1px solid Green;9 margin:0 0 10px 0;Ten} One Footer{ A Background-color:#ccc; -}
：
、
Here are three ways to surround floating elements. The final results are:
Method One: Add Overflow:hidden to the parent element
1 Section {2 border:1px solid green; 3 margin:0 0 10px 0; 4 overflow: hidden; 5 }The real purpose of the Overflow:hidden statement is 1. Prevent the inclusion element from being large by oversized content. After applying Overflow:hidden , the containing element retains its specific width, while the extra-large sub-content is cut off by the container; 2. It reliably forces the parent element to contain its floating child elements.
Method Two: floating the parent element at the same time
1 Section{2 Border:1px solid Green;3 margin:0 0 10px 0;4 width:100%; 5 float:left;6}7 Footer{8 Background-color:#ccc;9 Clear:left;Ten}
Method Three: add non-floating purge elements
Adds a non-floating child element to the end of the parent element, and then clears the child element. There are two types of scenarios.
The first type:
Simply add a child element to the HTML and apply the clear property to it.
1 <Body>2 < Section>3 <imgsrc= "Sea.png"alt= "Sea">4 <P>Picture Title</P>5 <Divclass= "Clear"></Div>6 </ Section>7 <Footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</Footer>8 </Body>
Here, you add a class for the div so that you can write the style in the CSS.
1 Div.clear {2 clear:left; 3 }The second type:
If you specifically don't want to add this purely expressive element, there's a better way.
First add a class to the section Clearfix
1 < Section class= "Clearfix" >2 <imgsrc= "Sea.png"alt= "Sea">3 <P>Picture Title</P>4 </ Section>5 <Footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</Footer>
Then, use this magical clearfix rule.
1 .clearfix:after {2 content : ; 3 display : block ; 4 height : 0 ; 5 visibility : hidden ; 6 clear : both ; 7 } The Clearfix rule was first invented by programmer Tony Aslett, and it only added a purge containing a period as a non-floating element.
Three ways to surround floating elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
