Home > Web Front-end > CSS Tutorial > Introduction to clear floats and closed floats

Introduction to clear floats and closed floats

不言
Release: 2019-02-28 13:21:12
forward
3274 people have browsed it

This article brings you an introduction to clearing floats and closing floats. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why should we clear the float

  • The child element float:left; leaving the document flow will cause the parent element to collapse (unable to hold up)

  • The parent element is supported by the child element

  • Clear float clear:both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}
Copy after login
  • Closed float - add additional elements clear:both

Parent element does not set height

子元素 float:left

额外增加元素 clear:both
Copy after login
<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>
Copy after login
  • Closed float--use br and Its own html attributes

==Note== clear=all Deprecated attributes (moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>
Copy after login
  • Close float-- The parent element sets overflow:hidden

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
Copy after login
Copy after login
  • closed float -- the parent element sets display:table

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
Copy after login
Copy after login

The above is the detailed content of Introduction to clear floats and closed floats. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
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