©2020-2024 ioDraw All rights reserved
<>overflow Three functions
<>1, Hide overflow content
for example ：
# container A{ width：50px; } <div id=“A“> Hello, Hello, Hello, Hello, Hello, Hello, Hello, hello
Hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello Hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
Too many words , Small width , If it cannot be filled, it will naturally exceed the container .
overflow：hidden Hide excess text
auto Scroll bar will be displayed after exceeding
scroll Always have scroll bars
<>2, Resolve outer margin collapse
In a parent element , Child element settings margin-top/bottom Will collapse to the parent element , To prevent this phenomenon , The solution is ：
Set the parent element's padding,border,overflow：hidden.
<>3, Solve the problem of parent element height collapse caused by floating
When the parent element height is not set , All child elements float , Will cause the parent element to collapse . One solution is to set the overflow. See code below for details .
overflow：hidden,auto,scroll All right . Recommended hidden. In this way, the parent element will change adaptively according to the child element or the content of the child element .
.list1 { background: green; width: 800px; /* 6- Content overflow */ /* Overflow hide */ /* overflow:
hidden; */ /* After setting , If the height is not set, the parent element will */ /* Overflow adaptation , Scroll bar appears */ /* overflow: auto; */
/* Overflow required scroll bar */ /* overflow: scroll; */ /* Overflow display , Cannot clear float */ /* overflow: visible;
*/ }
Technology