CSS clear floating and positioning

1. The original two blocks in a row will change their original position (into multiple lines) because of the size of the browser window, the browser window is not wide enough to accommodate
Workaround: Add a parent div and set the width

. Father {
width:500px;
height:300px;
}
<div class= "Father" >
<div class= "Left" > </div>
<div class= "Right" > R </div>
</div>



2. Clear floating Clear
When an element has a floating property, it affects its parent element or subsequent elements, and a layout disorder occurs.

None: Default value. Allow floating objects on both sides
Left: does not allow floating objects
Right: Floating objects are not allowed on the left
Both: Floating objects are not allowed on the left and right sides

When the parent element does not specify a height , and its child elements are floating, the height of the parent element is not adaptive

(1) Additional labeling method (add an empty box at the end)
It is recommended to add a "clear:both" element at the end of the container, forcing the container to fit its height so that all the float elements are loaded

. Father {
width:500px;
Clear:both;
}
<div class= "Father" >
<div class= "Left" > </div>
<div class= "Right" > R </div>
<div class= "Clear" ></div> add an empty div
</div>

(2) Use of overflow (overflow)
Add a Overflow:hidden property to the parent box, the simplest way to clear the floating method, if the child element uses the positioning layout , the content beyond the visible

(3) Absolute positioning and relative positioning
Position:absolute;relative
Absolute positioning: Separates an object from the document flow and is absolutely positioned relative to the parent object by setting Left,right,top,bottom four directions. If no such parent object exists, then the body object

Relative positioning and absolute positioning
Absolute positioning is the parent element as the datum point, and positioning---out of the document flow
Relative positioning is based on its own as a datum point, positioning---leave the original position, but also occupy the original space

When we want to use absolute positioning: there must be two conditions
1. The parent element must be positioned with the attribute, position:relative is generally recommended;
2. Add the absolute positioning Position:absolute to the child elements, plus the directional properties

#main {
width:700px;
margin:0 Auto;
Background:pink;
Overflow:hidden;
position:relative;
｝

#left {
width:200px;
height:200px;
background:red;
Position:absolute;
top:100px;
left:-100px;
｝

(4) Pseudo-Object after clear floating, the most popular online (equivalent to a hidden div at the end of the parent box)
. clearfix:after{
Clear:both;
Display:block;
Visibility:hidden;
height:0;
line-height:0;
Content: "";
}


<div class= "Father Clearfix" >
<div class= "Left" > </div>
<div class= "Right" > R </div>
<div class= "Clear" ></div> add an empty div
</div>

This article is from the "Nothing qq:934033381" blog, please be sure to keep this source http://tianxingzhe.blog.51cto.com/3390077/1708308

CSS clear floating and positioning