The usage of float in CSS is described in detail

about float very early contact, below with a small demo to talk about.

1: In the page layout, assume that there are two P, the demand is two p in the same row; one of the solutions is to use floating,

eg

<li style= "border-top:1px #CCCCCC dashed;border-bottom:1px #CCCCCC dashed;" >                    <p class= "g-position_a" > Job profiles </p>                    <p class= "G-position_b" >                        <dl class= " g-position_list fl ">                            <dd> Job Title: PHP Engineer </dd>                            <dd> working experience: 1-3 years </dd>                            <dd> Number of recruits: 10 </dd>                            <dd> Minimum Education: Unlimited </dd>                        </dl>                        <dl class= "G-position_list fr" >                            <dd> Monthly Salary: 3000-5000 yuan (tax calculation) </dd>                            <dd> Age: Unlimited </dd>                        </dl>                    </p> </li><p class= "box" style= "width:300px;height:300px;></p>

2: The above code because Li's two P floating around (out of the document flow), Li will not have a "page performance" height, so li up and down the border line will be coincident,

Li's subsequent class called Box's p will come up;

The solution at this point is to add a p that removes the float after its two floating sub p, when Li is re-represented in the page because of the height of the "inner element Open";

eg

<li>                    <p class= "g-position_a" > Job profiles </p>                    <p class= "G-position_b" >                        <dl class= " G-position_list ">                            <dd> Job Title: PHP Engineer </dd>                            <dd> working experience: 1-3 years </dd>                            <dd> Number of recruits: 10 </dd>                            <dd> Minimum Education: Unlimited </dd>                        </dl>                        <dl class= "G-position_list" >                            <dd> Monthly Salary: 3000-5000 yuan (tax calculation) </dd>                            <dd> Age: Unlimited </dd>                        </dl>                    </p>                    <p class= "Clearfix" ></p>             </li>

Above this cliché CSS in the use of float is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.