Webbasic How to eliminate the floating effect

Source: Internet
Author: User

1. If you end up not needing to display the border of the parent element, you only need to deal with the effect on p:

p{

Clear:left/right/both

}

The above can eliminate left floating, right floating, and both are sometimes affected, attention can only eliminate the influence of Uncle Generation.

2. If you want to eliminate the effect on the parent element:

-Add an empty block inside the parent element.

-Clear on this new block

Principle

Because the newly added block does not float, it still occupies the stream (the new block is also not high), and it is clear to expose it (the form that appears with P)

This stretches the height of the stream so that the parent element has a high

<body>
<div id= "D0" >
<div id= "D1" ></div>
<div id= "D2" ></div>
<div id= "D3" ></div>
<!--eliminate floating effects: Eliminate the effect of floating on parent elements--
<div style= "Clear:left;" ></div>
</div>
<p> See me when floating </p>
</body>

3. Example: Photo wall

<!doctype html>
<meta charset= "Utf-8"/>
<title> Photo Wall </title>
<style>
/* Brush the Wall First */
body{
Background-color: #088;//Set the background wall for the lake Blue
}
/* Re-set the photo */
ul{
width:780px; Set the width of the UL (stream) equal to 3 Li width, the 4th will be automatically wrapped.
margin:20px Auto;
border:1px solid red;
/* Remove the symbol */
List-style-type:none;
}
li{
width:218px;
padding:10px;
margin:10px;
border:1px solid #ccc;//gray setting of each Li's border
float:left;//left floating to achieve a positive sequence of photos
Background-color: #fff;//Set the background color of each Li to white
}//Each Li occupies a width of: 218+2*10+2*10+2*1=260
p{
text-align:center;//Set the text that describes the photo to center
}
</style>
<body>
<ul>
<li>

<p> softly I'm Gone </p>
</li>
<li>

<p> as I softly come </p>
</li>
<li>

<p> I waved quietly </p>
</li>
<li>

<p> goodbye to the clouds of the West </p>
</li>
<li>

<p> Green Willow at the riverside </p>
</li>
<li>

<p> is the bride in the Sunset </p>
</li>
</ul>
Why use UL for photo walls instead of div?

With a list of similar things, its rendering efficiency is the highest.
</body>

Webbasic How to eliminate the floating effect

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.