How to deal with line breaks caused by float attributes in html5

In h5 development, float attributes are often used to solve some layout problems. However, in some complex layouts, you may also encounter phenomena such as using the float attribute, which causes the elements in a row to be unable to be aligned or the float elements to wrap. When encountering this kind of problem, we can modify the position of the element to solve the problem of line wrapping or misalignment of elements.

<p class="container">
    <a href="address-manager.html">
        <i class="icon-home icon-large"></i>
        <p>修改收货地址</p>
        <i class="icon-angle-right icon-2x"></i>
    </a>
</p>

For example, when I was writing a menu-like layout, this phenomenon occurred in the "Modify Address" column. When I moved the element that I wanted to float to the right (towards The arrow on the right) is adjusted to the position of the first element in the code to solve the problem of float line wrapping.
Since various browsers have some differences in styles, there is another situation where line wrapping problems will occur when the width of the element floating to the right is not enough. In this case, it can be solved by simply modifying the width.
Next, let’s summarize the characteristics related to the float attribute learned during the information search process:
(1) float is a floating positioning attribute in CSS
Features:
1. The float box can float left and right until its outer edge meets the containing box or another floating box;
2. The floating box is out of the regular flow of the document, and the regular flow of the document will ignore the existence of the floating box;
3. Floating boxes will not affect the layout of block-level boxes, but will affect the arrangement of inline boxes;
4. When the height of the floating box exceeds the height of the containing box (that is, the parent layout), the containing box will not automatically extend its height. If the containing box does not include other ordinary flows, the height of the containing box will be 0, which is the so-called height collapse phenomenon. .
The above situation is actually a manifestation of the floating box affecting the inline box.

The above is the detailed content of How to deal with line breaks caused by float attributes in html5. For more information, please follow other related articles on the PHP Chinese website!