CSS clear floating and positioning

Source: Internet
Author: User

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 {
<div class= "Father" >
<div class= "Left" > </div>
<div class= "Right" > R </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 {
<div class= "Father" >
<div class= "Left" > </div>
<div class= "Right" > R </div>
<div class= "Clear" ></div> add an empty 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
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 {
margin:0 Auto;

#left {

(4) Pseudo-Object after clear floating, the most popular online (equivalent to a hidden div at the end of the parent box)
. clearfix:after{
Content: "";

<div class= "Father Clearfix" >
<div class= "Left" > </div>
<div class= "Right" > R </div>
<div class= "Clear" ></div> add an empty 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.