CSS 规则“明确:两者"是什么?做? [英] What does the CSS rule "clear: both" do?

问题描述

以下 CSS 规则有什么作用:

.clear { clear: both;}

为什么我们需要使用它?

解决方案

我不会在这里解释浮动的工作原理(详细)，因为这个问题通常侧重于为什么使用 clear: both; 或者 clear: both; 究竟做了什么...

我会保持这个答案简单明了，并会以图形方式向您解释为什么 clear: both; 是必需的或它的作用......

通常设计师将元素向左或向右浮动，这会在另一侧创建一个空白空间，允许其他元素占用剩余空间.

它们为什么要浮动元素?

当设计者需要 2 个并排的块级元素时，元素是浮动的.例如，假设我们要设计一个基本的网站，其布局如下...

演示图像的

已经指定的那样，我们清除这些浮点数的方式并不是一种干净的方式，因为我们正在使用一个空的 div 元素，它不是一个 div 元素.因此，这里是清除修复.

把它想象成一个虚拟元素，它会在你的父元素结束之前为你创建一个空元素.这将自动清除包含浮动元素的包装元素.这个元素实际上不会存在于您的 DOM 中，但可以完成这项工作.

要自清除任何具有浮动元素的包装元素，我们可以使用

.wrapper_sharing_floated_elements:after {/* 虚构的类名 */内容: "";清楚:两者；显示:表；}

注意我为那个 class 使用的 :after 伪元素.这将在包装器元素关闭之前为其创建一个虚拟元素.如果我们查看 dom，您可以看到它在文档树中的显示方式.

所以，如果你看到，它是在浮动的子元素 div 之后呈现的，在那里我们清除了浮动，这只不过相当于有一个带有 的空 div 元素clear: both; 属性，我们也用于此目的.现在为什么 display: table; 和 content 不在此答案范围内，但您可以了解有关 这里是伪元素.

请注意，这也适用于 IE8，因为 IE8 支持 :after 伪.

<小时>

原答案:

大多数开发人员在他们的页面上向左或向右浮动他们的内容，可能是包含徽标、侧边栏、内容等的 div，这些 div 向左或向右浮动，剩下的空间未使用，因此如果您放置其他容器，它也会在剩余空间中浮动，所以为了防止使用 clear: both; ，它会清除所有向左或向右浮动的元素.

演示:

------------------ ----------------------------------div1(Floated Left) 其他div在这里占用空间------------------ --------------------------------——

现在，如果你想让另一个 div 呈现在 div1 下方，那么你将使用 clear: both; 这样它会确保你清除所有浮动，左或对

-------------------div1(左浮动)------------------<div style="clear: both;"><!--这个<div>充当分隔符--></div>----------------------------------其他 div 现在呈现在这里----------------------------------

What does the following CSS rule do:

.clear { clear: both; }

And why do we need to use it?

解决方案

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Live Example of the demo image.

Code For Demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Note: You might have to add header, footer, aside, section (and other HTML5 elements) as display: block; in your stylesheet for explicitly mentioning that the elements are block level elements.

Explanation:

I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.

No floats for header, next comes the aside tag which I'll be using for my website sidebar, so I'll be floating the element to left.

Note: By default, block level element takes up document 100% width, but when floated left or right, it will resize according to the content it holds.

1. Normal Behavior Of Block Level Element
2. Floated Behavior Of Block Level Element

So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.

1. div's will render one after the other if they are NOT floated
2. div will shift beside each other if floated left or right

Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?

So if you note in the layout demo - in case you forgot, here it is..

I am using a class called .clear and it holds a property called clear with a value of both. So lets see why it needs both.

I've floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..

So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It's because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.

1. Normal Flow Of The Document
2. Sections Floated To Left
3. Cleared Floated Elements To Stretch Background Color Of The Container

(Refer ^[Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)

I've provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn't hold any floated objects.

In the second example, when the object is floated to left, the container element (POOL) won't know the dimensions of the floated elements and hence it won't stretch to the floated elements height.

After using clear: both;, the container element will be stretched to its floated element dimensions.

Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.

Say you want 2 elements side by side and another element below them... So you will float 2 elements to left and you want the other below them.

1. div Floated left resulting in section moving into remaining space
2. Floated div cleared so that the section tag will render below the floated divs

---

1st Example

---

2nd Example

Last but not the least, the footer tag will be rendered after floated elements as I've used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.

---

Clearfix

Coming to clearfix which is related to floats. As already specified by @Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.

Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won't exist in your DOM literally but will do the job.

To self clear any wrapper element having floated elements, we can use

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Note the :after pseudo element used by me for that class. That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.

So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.

Note that this will also work in IE8 as IE8 supports :after pseudo.

---

Original Answer:

Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.

Demonstration:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Now what if you want to make the other div render below div1, so you'll use clear: both; so it will ensure you clear all floats, left or right

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

这篇关于CSS 规则“明确:两者"是什么?做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！