1.div block If you do not set the width of the high, he does not show, only the content will hold him up.
2. I use a high 201 image to open it, he is not 201, in Chrome is 204. In Firefox 206
But I'm going to use the div block, he's just 100, that's 100.
3, if the previous element has a 30px bottom margin, and the element below has a 60px top margin, then a margin merge is generated. They
The margin between the sides is only 60px, not 90px.
4. The scroll bar next to it is 17px. It was found that the body width was less than 17px since the scroll bar came out. My div is not set
The width is open by the picture, and his width is reduced by 17px with the appearance of the scroll bar. When I set the width of a div to a specific
Width, he does not change width as the scroll bar appears and does not.
5. When I set the width of the div to 1400px, he would appear with a horizontal scroll bar, but at this point the body size, he is still 1333
366, the margin is still 8px. Originally the width of the browser is 1366, this 1333 is minus the two sides of the margin 16 and the distance of the scrollbar 17px
6.1400px exceeded the body, although he set the right margin, but he did not show it. The part he 1400-1333+30-8 is also used in the past. In the debugging, there will be a side of the scroll bar, he is next to the Div, in the absence of debugging, he is next to the Div, but his overall shortened by 17PX.
7. The div containing the picture I did not set the width height, then I let the picture inside float, will find the height of the parent element collapsed. The following DIV has been made up. If I set a width for him or not. If I give him a greater than the width of the picture, then the following div can be squeezed down, if the height of the set is less than the picture, it will be under the picture, the following Div will also be complementary. will also be under the picture. But while the picture is out of the flow of the document, he still contains the upper-left corner of his Div, which is written like W3school, until its outer edge touches the border of the containing box or another floating box.
8. Clear floating: In the div block containing this floating element div block to set him Overflow:hidden, found that he really ran out of the picture, but his left margin is not 60px, the top margin or 60px. He panned out from under the picture like right.
If he does, he adds a width:100%, so that's the whole downward shift. Or keep the 60px from the left margin of the body, but the div above him is not 60px. If the width given to him is not 100% of the set, but a specific value, then he pans right out from underneath him. If you set its width a little wider, it won't fit on his right side and it will run down to him. It can also be achieved with clear.
Set clear for the element or set width;100% (or fixed width) +overflow:hidden, which are set for elements that are affected by the float.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>#div1{margin:30px;background:Red;width:300px;Height:100px; }img{float: Left; }#div2{margin:60px;background:Yellow;Overflow:Hidden; }#div3{width:200px;Height:100px;background:Red; } </style></Head><Body><DivID= "Div1"><imgsrc= "082211207.jpg"/></Div><DivID= "Div2"> <DivID= "Div3"></Div></Div></Body></HTML>
About float, margin, debug
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
