Home >Web Front-end >HTML Tutorial >Solution to div css floating_html/css_WEB-ITnose
Solution to div css floating_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:271117browse
Known parent div container, the parent container contains two child divs, add a clear floating (clear) div tag behind the two child div tags, inside the parent div tag (left and right sides/*css5 */) The float is cleared.
If there is a div container 0fd95622ee3d539259ddb2dd2ba82a65 16b28748ea4df4d9c2150843fecfba68, it contains a sub-container 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68, the sub-container Set a width, height, and background color. If you do not set inner and outer margins and clear floating clear and floating float, the subcontainer div will be on the left by default. So whether it is really left, let's set float:left; we found that after setting left, the sub-container div floated, and the sub-container div was a certain distance from the top of the large container. Then I added margin-top:10px, and the sub-container was in the original position. On the basis of moving the margin distance downward, that is to say, it floats and is not affected by the margin padding.
<body> <div class="divcss5"> <div class="clear"></div>
8387170a1dc1061890d03fa7e3e8458b16b28748ea4df4d9c2150843fecfba68
76f3532095f6312ccfafe9970137b14bd4e6ef3935d870d31c81823c096b9b03-->
</div> </body>
If I now set top:10px to the sub-container, the effect will not change, which means that the floating will not follow the top. left changes. What effect do I see when I set the relative position position:relative; to a subcontainer? Now the effect of the sub-container is still floating, but when I set margin-left:10px and left:10px respectively; I see that the sub-container will change the corresponding position according to the margin-left and left, and the same margin-top and top will changes occur.
That is to say, when the sub-container is set to float, and then setting margin to the sub-container will have an effect, setting left and top will have no effect. Only when the relative position is set to the sub-container, not only the margin will have an effect , left and top can also work, so does it mean that left and top only work when they are in relative positions? So now we will do an experiment. I deleted float:left;position:relative; in the sub-container. It will not float and there will be no relative position, and then write top:10px;left:10px; accordingly. The code is as follows: .clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;}; The result is that the sub-container has not moved at all, so, it turns out, left , top only works when the relative position is set. Margin will work whether you set position or not.
Continuing the float floating above, if you now set inherit for float; the setting inherits the float attribute of the browser, what we see at this time is not floating, and it is on the left by default. The same setting of none initial will have no effect. Only if the subcontainer has floating left and right set, the subcontainer will float.
Next, we use another method to clear floats. The HTML code is still the above code, and the css code of the large container div is still the above code.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;},
The code of the sub-container is still the above code: .clear{width: 200px;background: #f2e;color:#030617;height: 20px; float:left;}, what you see at this time is the floating effect, the sub-container floats on top of the large container. For the same principle, I still use clear:both; we can use the css pseudo-element: after, the following is a very Simple css code, write css pseudo-class for the parent container, code: .divcss5:after{content: "1";clear: both;display: block;}, at this time, what we see is that the large container is cleared Float, and you can see on the browser that the subcontainer is included inside the large container. Check the browser with F12 and you can see that after is included in the parent container. Therefore, it is equivalent to adding a clear to the parent container, but it is missing a div layer. This layer is implemented by .divcss5:after.