about float and position in CSS (when the child element div in the parent container div is float, the parent element cannot be stretched (or highly adaptive) to resolve it) __div

There are different ways to use when building page layouts. Depending on the layout requirements for a particular page, some methods may be better than others in different situations.

For example, you can use several floating elements to build a neat and concise page layout. Or, if you need more complex typesetting requirements, you can use other methods, such as relative positioning and absolute positioning.

In this article, we'll first discuss element floats, and then we'll discuss how to use the X,y and Z axes to control the position of the elements.

Element float

When building a page layout, using element float is an intuitive way to control the position of the element. element float allows one element to approach or stay away from another element. It constructs the relationship between the element in typesetting and other elements based on the size of an element and the size of its parent node container.

When an element is floated, the element is next to the previous element or to a new row. This depends on the location of the adjacent elements.

Of course, Element float also brings a lot of problems while providing great power. A notable problem is that when a parent node includes several floating child elements, the layout of the parent node takes into account the size and position of the floating child element, but the child element does not affect the size of the parent node. In this case, the parent node's height becomes 0, and other properties are ignored. Most of the time, this problem has not been noticed, especially if the parent node is not attached to any CSS styles, and the nested elements appear to be correctly arranged.

If you do not arrange nested elements correctly, you may cause typographical errors. See this example below, the DIV container with class name. Box-set should have a light gray background, but because its nested elements are floating elements, the original expected background color does not appear. If you look at the box model of the. Box-set, you will find that the height value is 0.

<div class= "Box-set" >
  <div class= "box" >box 1</div> <div class=
  "box" >box 2</div >
  <div class= "box" >box 3</div>
</div>

. box-set {
  background: #e8eae9;
}
. box {
  background: #8ec63f;
  height:100px;
  Float:left;
  margin:10px;
  width:200px;
}

One workaround is to add an empty element before the parent container closes the label and set its clear:both. "Clearing floating elements" can solve most situations, but it is not "semantically correct". As the number of floating elements that need to be cleared on the page increases, so does the number of empty nodes that are required, but these empty nodes do not have any HTML semantics.

Fortunately, there are other techniques that are used in the same way, most notably the use of overflow and clearfix techniques.

Using overflow

Setting Overflow:auto on the parent container allows it to automatically contain child elements, thus having the actual height value, so that the gray background in the example above will be displayed.

When using this trick in IE6, you need to set the height or width attribute on the parent node container. Because the height is often variable in the actual situation, the value of the width is set. For IE on the Apple platform, setting Overflow:auto will add scroll bars to the container, so it is best to set the Overflow:hidden.

. box-set {
  background: #404853;
  Overflow:auto;
}

This trick has some side effects. For example, you need to add a style or move a child element beyond the bounds of the parent container, such as implementing a border shadow or adding a drop-down menu. In the example below you will see that when the border shadow is over the range of the parent container, it is obscured and the second child element is arranged with a problem.

Using Clearfix

Clearfix are usually paired with: before or: After pseudo elements are used. Using pseudo elements is to create a hidden element before or after the parent container that contains the floating element. Prevents the top margin of a child element from disappearing by using display:table for the before pseudo element to create an anonymous Table-cell element. This move has a consistent effect in IE6 and 7. Similarly, by setting: After pseudo elements to prevent the bottom of child elements margin disappear.

In addition, you need to use the *zoom property to trigger the haslayout mechanism for the parent container to resolve the IE6 and 7 consistency. The haslayout mechanism determines how the element should render and frame its contents, as well as the position relationship between elements.

In the example below using Clearfix, you will see that the element can be displayed even if it is beyond the parent container. (Note the Border Shadow)

. Box-set:before,
. box-set:after {
  content: "";
  Display:table
}
. Box-set:after {
  Clear:both
}
. Box-set {
  *zoom:1;
}

Effectively include floating elements

Which technique to use depends on your personal habits. Some people tend to use the clearfix technique because it is more consistent across browsers. Others feel that Clearfix needs more code. Therefore, it is not important to choose which skill, it is important to note and write in the document.

A common implementation is to have a uniform class name for all parent containers that need to contain floating elements to facilitate the management of styles. For example, use the following code so that you need to add a group's class name to the parent node that contains the floating element.

. Group:before,
. group:after {
  content: "";
  Display:table
}
. Group:after {
  Clear:both
}
. Group {
  *zoom:1;
}

Position property

In some cases, you need more control over the position of the element, and then you need to use the position attribute. There are five different values for the Position property.

Position Static

This is the default value for the Position property, meaning that the element does not and does not accept any position offset attributes for that element.

In the following example, all the boxes will pile up one after the other. Because they are block-level elements and are not floated.

<div class= "Box-set" >
  <div class= "box box-1" >box 1</div> <div class=
  "box box-2" >box 2 </div>
  <div class= "box box-3" >box 3</div> <div class=
  "box box-4" >box
</div>

. box-set {
  background: #e8eae9;
}