Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
