css上下左右浮动_浮动-CSS中的左右

css上下左右浮动

float property is used to decide which element floats and which doesn't.

float属性用于确定哪个元素浮动，哪个元素不浮动。

It's value can either be left or right. An element with float style property floats in the extreme left or in the extreme right side of the parent element.

它的值可以为left或right 。 具有float样式属性的元素将float在父元素的最left或最right 。

An element doesn't take the complete width like a block level element, when float style property is applied, rather it allows its siblings to surround it.

当应用float样式属性时，元素不会像块级元素那样采用完整的宽度，而是允许其同级包围它。

p {
    float: left | right;
}

Live Example →

现场示例→

clear财产 (clear property)

Whenever we use float property on any element, the elements below it try to fill up the space emptied by the float element, as the float element either moves to the left or the right boundary.

每当我们在任何元素上使用float属性时，其下方的元素都会尝试填充float元素清空的空间，因为float元素会移动到左侧或右侧边界。

This behaviour can distort your webpage design. To avoid the elements below the floating element to surround it, clear property is used.

此行为可能会使您的网页设计变形。 为了避免浮动元素下面的元素包围它，请使用clear属性。

By prodiving clear:right style to the element below the floating element, we inform the element, to stay clear off the element which is floating right. Similarly clear:left, stays clear off the floating left element. And clear:both works for both.

通过向浮动元素下方的元素提供clear:right样式，我们通知该元素，以使浮动元素右移。 同样clear:left ，保持远离浮动的left元素。 clear:both适用。

Live Example →

现场示例→

使用overflow:auto破解 (Using overflow:auto hack)

If we have a parent element, and a child inside it. And the height of the child element is more than the parent element, i.e. the child element is taller than the parent element. Now, if the child is floated, it leaves the parent element and renders on top of it, reducing the parent element to its next minimum size, which can be zero as well, making the parent element disappear.

如果我们有一个父元素，并且里面有一个孩子。 并且子元素的高度大于父元素，即子元素比父元素高。 现在，如果子项处于浮动状态，它将离开父项元素并在其上方进行渲染，从而将父项元素减小到其下一个最小大小，该最小大小也可以为零，从而使父项元素消失。

Live Example →

现场示例→

应用程序：网页布局示例 (Application: Web page Layout Example)

Do you know, we can create a basic layout of a simple webpage now. A webpage which will have a header, a body part consisting of a sidebar and a content section and then a footer below the body.

您知道吗，我们现在可以创建一个简单网页的基本布局。 一个网页，其中将包含一个页眉，一个包含侧栏和内容部分的正文部分，然后是正文下方的页脚。

Go to: Setting basic Webpage Structure

or just go with the flow and click on

转到： 设置基本网页结构

或只是顺其自然，然后单击 Next, you will anyways reach there soon. 下一步 ，您将很快到达那里。

翻译自: https://www.studytonight.com/cascading-style-sheet/css-float

css上下左右浮动