1. The height of the parent element is not enough due to the floating of the child element
Problem Description: a parent element with a minimum height of 100px is nested with a child element with a height of 300px. When the child element floats, the height of the parent element does not increase.
Question view:
Desired view:
Code to be solved:
<!DOCTYPE html> <html> <head> <title>1</title> <meta charset="utf-8"> <style type="text/css"> .d0{width: 300px;background: #336;min-height: 100px;} .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5} </style> </head> <body> <div class="d0"> <div class="d1">I'm a floating child element</div> </div> </body> </html>
Solution: append a child element with empty content at the bottom of the parent element, class is clear, and add the style. clear:after{content:"";display:block;clear:both;}
Resolved Code:
<!DOCTYPE html> <html> <head> <title>1</title> <meta charset="utf-8"> <style type="text/css"> .d0{width: 300px;background: #336;min-height: 100px;} .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5} /*Problem solving code*/ .clear:after{content:"";display:block;clear:both;} </style> </head> <body> <div class="d0"> <div class="d1">I'm a floating child element</div> <div class="clear"></div> </div> </body> </html>
2. Outer margin overflow caused by floating child elements
Problem Description:
Under some special conditions, setting the top margin for a child element may affect the parent element.
Question view:
Desired view:
Code to be solved:
<!DOCTYPE html> <html> <head> <title>2</title> <meta charset="utf-8"> <style type="text/css"> .d1{width: 300px;height: 100px;background: #336} .d2{width: 300px;height: 100px;background: #289} .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;} </style> </head> <body> <div class="d1">Above div</div> <div class="d2"> <div class="d2son">Underneath div Child elements</div> </div> </body> </html>
Solution:
At the first child element position in d2 (!!! Must be an empty child element) the generated content is empty and the display mode is table (!!! Must be a table element)
Add the first child element in d2, and add the style to it:. d2:before {content:"";display:table;}
Resolved Code:
<!DOCTYPE html> <html> <head> <title>2</title> <meta charset="utf-8"> <style type="text/css"> .d1{width: 300px;height: 100px;background: #336} .d2{width: 300px;height: 100px;background: #289} .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;} /*Problem solving code*/ .d2:before {content:"";display:table;} </style> </head> <body> <div class="d1">Above div</div> <div class="d2"> <div class="d2son">Underneath div Child elements</div> </div> </body> </html>