sets the style to float:left for the block-level element, and the block-level sibling element has the style margin-top:30px . In this case, the floating element overrides its sibling element, but the floating element cannot overwrite the margin part of the sibling element.
the screenshot of the browser is as follows:
as you can see from the figure, the red floating element does not cover the margin part of the sibling element div-sharpwrap .
the style of each element is as follows:
-sharpbox {
width: 200px;
height: 200px;
padding-top: 20px;
border-bottom: 10px solid;
margin-bottom: 20px;
background-color: red;
float: left;
}
-sharpwrap {
width: 100px;
height: 100px;
margin-top: 30px;
background-color: yellow;
}