https://blog.csdn.net/qq_41638795/article/details/83304388
I overflow:hidden
If overflow:hidden is set in an element, if the content of the element exceeds the given width and height attributes, the excess part will be hidden and not occupied.
/*css style*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*Overflow hiding*/ } </style> /*html*/ <div style=""> the weather is nice today!<br>the weather is nice today!<br> the weather is nice today!<br>the weather is nice today!<br> </div>
The effect is as follows
: 
In general, ellipsis will be displayed after overflow in the page. For example, when a line of text exceeds the fixed width, the excess content will be hidden and the ellipsis will be displayed.
/*Applies only to single line text*/
div{
width: 150px;
background: skyblue;
overflow: hidden; /*Overflow hiding*/
white-space: nowrap; /*Specifies that the text does not wrap*/
text-overflow: ellipsis; /*Show ellipsis mark (...) when text overflows in object*/
}
The effects are as follows:
II overflow:hidden: clear floating
<!DOCTYPE html> <html> <style type="text/css"> .box{ background:skyblue; } .kid{ width: 100px;height: 100px; float:left;} .kid1{ background: yellow; } .kid2{ background: transparent; } </style> <body> <div class="box"> <div class="kid kid1">Child element 1</div> <div class="kid kid2">Child element 2</div> </div> <div>Other parts</div> </body> </html>
Display effect:
explain:
In general, when the parent element does not set the height, the height is adaptive as the content increases. When all the child elements inside the parent element are set to float, the child element will leave the standard flow and will not occupy the bit. The parent element cannot detect the height of the child element, and the height of the parent element is 0.
Set height, not width (default line):
.box{ background:skyblue;height: 200px;}
effect:
The HTML is as follows:
<!DOCTYPE html> <html> <style type="text/css"> .box{ background:skyblue; } .kid{ width: 100px;height: 100px; float:left;} .kid1{ background: yellow; } .kid2{ background: transparent;border:1px solid red; } .wrap{ width: 300px; height: 150px; background: green; color: white; } </style> <body> <div class="box"> <div class="kid kid1">Child element 1</div> <div class="kid kid2">Child element 2</div> </div> <div class="wrap">Other parts</div> </body> </html>
effect:
Description:
- The parent element has no height, and its child elements are float, and the height of all parent elements is 0;
- Because the parent element has no height, the following elements will top up, causing the collapse of the page.
Add an overflow:hidden attribute to the parent, so that the height of the parent is adaptive to the height of the child container and the content of the child. As follows:
Because overflow: hidden is used in browsers with lower IE versions; You can't achieve this effect, so you need to add zoom:1;
Therefore, for better compatibility, if you need to use overflow:hidden to clear floating, you'd better add zoom:1;
<!DOCTYPE html> <html> <style type="text/css"> .box{ background:skyblue; overflow:hidden;} .kid{ width: 100px;height: 100px; float:left;} .kid1{ background: yellow; } .kid2{ background: transparent;border:1px solid red; } .wrap{ width: 300px; height: 150px; background: green; color: white; } </style> <body> <div class="box"> <div class="kid kid1">Child element 1</div> <div class="kid kid2">Child element 2</div> </div> <div class="wrap">Other parts</div> </body> </html>
III overflow:hidden ， solve the collapse of outer margin
There are child elements inside the parent element. If you add a margin top style to the child element, the parent element will follow, causing the outer margin to collapse, as follows:
<!DOCTYPE html> <html> <style type="text/css"> .box{ background:skyblue;} .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px} </style> <body> <div class="box"> <div class="kid">Child element 1</div> </div> </body> </html>
Display effect:
Note: the top edge of the child element and the parent element is aligned, there is no 20px, and the outer margin collapses.
Add: border:2px solid red to the box class; Or overflow: hidden;
