Home > Web Front-end > H5 Tutorial > body text

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

一个新手
Release: 2017-09-07 10:35:37
Original
3643 people have browsed it

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>
Copy after login

How to deal with line breaks caused by float attributes in html5
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template