Avoid unnecessary float (display: inline, position: relative)

Float Chinese translation is float, which is very helpful in CSS. Float is often used when you need two block-level elements at the same height, let's take a look at the float attributes.

Let's take a look at the possible float values:

Float: Left-elements float to the left

Float: Right-the element float to the right

Float: None-not floating

Float: Inherit-inherits from the float attribute of the parent class

Since floating is mentioned, it is necessary to mention floating cleaning, because if the float of an element is set, it will affect its left and right elements. When we do not need to float, we should immediately clean it up. Clear floating. The clear attribute is equivalent to float, but one more attribute is added.

Clear: left/right/Inherit/none (clear floating, non floating, and inherit the cleaned attributes)

Clear: Both-clear all float

The above briefly explains floating and floating clearance. Floating is widely used, but float should not be used in many places, or we have a better solution. We have a better solution to these problems.

1. unordered links. you can often see the keyword links of some websites, or product keywords, which have been classified, and other parts will use chaotic sorting of shorter links, some people use <ul> <li> with float for the link. I think this is completely unnecessary. You can set the <li> label's display: inline, <li> set it to a line-level element to achieve the effect of mixed sorting. Float is not required. Even such a link can be replaced by a tag like <p> <A>. Isn't it more concise?

2. When creating a block, we often use more to link relevant pages. Such a title bar is usually the title on the left and the more link on the right, A lot of people like to use float, so they need to add more labels to clear after float, which is very complicated. Even more people use the whole picture to work with hot spots, I don't think this is a good solution. In fact, you can use positioning to set the position of the title: relative. Then define the right: 0 of the label "more", or you can set its position in detail. In this way, float and clear are saved, and the structure is clearer.

3. Multi-column irregular layout, we often need to use three columns of layout. This layout is a rule, but for the sake of appearance, we must define the total width of the three columns, however, the floating width in CSS must be <99% of the parent label width. Otherwise, errors may occur in some browsers, however, the width of 99% is obviously more than 10 PX under the wide screen display, so this is a very depressing problem, in fact, when encountering such problems, we should use position positioning to solve the problem rather than floating. This problem is not mentioned here. Next we will have a detailed article on positioning.

To sum up, float Under CSS is often used, but we need to stick to several principles and use float when there is a better solution (display, position, the total floating width (including margin and padding) of the same height should be less than or equal to the width of the (<) parent element. Remember to be less than, not equal, if it is the same, you may see what you don't want to see in other browsers.