Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the basic knowledge points of CSS floating float", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the basic knowledge points of CSS floating float" this article.

Float attribute

A floating box can be moved left or right until its outer edge touches the border that contains the box or another floating box.

The float attribute enables elements to move around the design, allowing other elements to surround them. Elements float horizontally rather than vertically, and there are only three possible attribute values: none,right,left. When using these two values, the floating element floats to the right or left of the container element.

Clear attribute

Clear floating element values: left,right,both,none, inherit. This rule only affects the elements that use cleanup, not other elements. It indicates which edges of the box should not be next to the floating box. It allows the surrounding elements to make room for floating elements.

Float attribute instance

When you float box 1 to the right, it leaves the document stream and moves to the right until its right edge touches the right edge of the containing box.

When box 1 floats to the left, until its left edge touches the left edge of the containing box. Because it is no longer in the document stream, it does not take up space and actually covers box 2, making it disappear from the view. If you move all three boxes to the left, box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until it touches the previous floating box.

If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If floating elements have different heights, they may be "stuck" by other floating elements as they move down:

Clear attribute instance

The row box next to the float box is shortened to make room for the float box, which surrounds the float box. Therefore, create a floater to surround the text around the image

Prevent the row box from surrounding the floating box, and add enough space to the top margin of the element being cleaned so that the top edge of the element falls vertically below the floating box

Float and clean up instances:

Suppose you want a picture to float to the left of the text block, and you want the picture and text to be contained in another element with a background color and border.

.news {background-color: gray; border: solid 1px black;} .news img {float: left;} .news p {float: right;}

Some text

There is a problem. Because the floating element is detached from the document stream, the div that surrounds the picture and text does not take up space.

How to make the surrounding element visually surround the floating element? You need to apply clear somewhere in this element: a new problem arises, and since there is no existing element to apply cleanup, we have to add an empty element and clean it up.

.news {background-color: gray; border: solid 1px black;} .news img {float: left;} .news p {float: right;}. Clear {clear: both;}

Some text

This can achieve the desired effect, but you need to add extra code. There are often elements that can apply clear, but sometimes you have to add meaningless tags for layout purposes.

However, we have another way to float the container div:

.news {background-color: gray; border: solid 1px black; float: left;} .news img {float: left;} .news p {float: right;}

Some text

This will get the effect we want. Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float everything in the layout and then clean up the floats with appropriate meaningful elements (often the footer of the site). This helps to reduce or eliminate unnecessary markings.

These are all the contents of this article entitled "what are the basic knowledge points of CSS floating float". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.