Why Use div tags
1. More configuration items, that means more flexibility, of course, the difficulty is higher;2. Can easily accommodate other HTML tags;static positioning is not positioned, where it appears, this is the default value, only if you want to overwrite the previous definition needs to display the specified, relative is relative to the element static position when the offset, if the specified static top is 50 pixels, When you specify relative and specify that top is 10 pixels, the actual top of the element is 60 pixels. Absolute absolute Positioning, direct designation Top,left,right,bottom. The interesting thing is that the absolute positioning is also "relative". Its coordinates are relative to its container. What is a container, the container is the closest to the element of a well-positioned "ancestor", positioning good meaning is that its position is absolute or fixed or relative. Without this container, use the browser's initial, body or HTML element. Standard is that only need to specify left and right,width can be automatically calculated according to the width of the container, but IE does not support. Fixed:fixed is the true absolute positioning, and its position is always calculated relative to the browser location. And even if the user scrolls the page, the element position can be kept relative to the browser, that is, you can always see, this can be used when making some color list. Unfortunately, IE is not supported. You can use the concept of "flow" to understand Div's Position property, an HTML document can be regarded as a tree, relative and static is in the flow, the order of precedence, position and parent node and the previous sibling node is related, The absolute and fixed are not in the stream, not in order, but only in relation to the parent node.
Float Propertyfloat Specifies the floating mode of the Div, none|left|right, and causes the div to lose the style of Clear:both and Display:block, and the DIV will not ask for the position of the "auto height" parent Div, as mentioned in the automatic height below.
Height PropertyHeight Specifies the heights of the Div, and will not be stretched if the height attribute is specified, even if it is not high enough to hold all the child elements.
Automatic Heightwhen the Height property is not specified, the DIV automatically calculates its height. Using the automatic height of the div is not an easy task, I have summed up the principle that it must be high enough to accommodate the last child element of the "ask for" position. The generic child element thinks it will ask for a location to the Div, but the div tag that sets the float property is not.Code: <div style= "width:200px;border:1px solid red;" >
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
</div> Effect: As you can see, the red border of the div is not being stretched. Let's add the following code:
<div style= "width:200px;border:1px solid red;" >
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "Clear:both;" ></div>
</div>
Effect: Move the red code up and try it out:
<div style= "width:200px;border:1px solid red;" >
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "Clear:both;" ></div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
</div>
Effect: Now, the reader should understand that it must be high enough to accommodate the last child element of the "ask for" position. What if the parent element also sets the float property? Code:
<div style= "float:left;width:200px;border:1px solid red;" >
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
</div>
Effect: The red-framed div is open, but it throws the question to its superiors. If you do not want to add an empty div to each piece of code, then use CSS to solve it, CSS code:. clearfix:after {
content: ".";
Display:block;
height:0;
Clear:both;Overfolw:hidden;Visibility:hidden;
}HTML code: <div style= "width:200px;border:1px solid red;"class= "Clearfix">
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>
The </div> effect will also open up the parent div. It's not a sticker. Note: Some versions under some Windows systems may not support this setting through CSS. Original Blog Address:
HTML Div uses automatic height, that is, do not set the height property to pay attention to the problem
(reprinted) The Div in HTML uses automatic height