Detailed introduction to the usage of float in css

I have been exposed to float for a long time. Let’s talk about it with a small demo.

1: In the page layout, assuming there are two p, the requirement is that the two p are on 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">职位简介</p>
                    <p class="g-position_b">
                        <dl class="g-position_list fl">
                            <dd>职位名称：php工程师</dd>
                            <dd>工作经验：1-3年</dd>
                            <dd>招聘人数：10人</dd>
                            <dd>最低学历：不限</dd>
                        </dl>

                        <dl class="g-position_list fr">
                            <dd>月薪：3000-5000元（个税计算）</dd>
                            <dd>年龄：不限</dd>
                        </dl>
                    </p>

 </li>

<p class="box" style="width:300px;height:300px;></p>

2: In the above code, because the two p’s in li float left and right (out of the document flow), li will not It has the height of "page display", so the upper and lower border lines of li will overlap,

The p with the class name box after li will pop up;

The current solution is Add a p that eliminates the floating sub-p after its two floating sub-p. At this time, the height of li due to "internal element expansion" will be re-appeared on the page;

eg:

　　　　　　　　<li>
                    <p class="g-position_a">职位简介</p>
                    <p class="g-position_b">
                        <dl class="g-position_list">
                            <dd>职位名称：php工程师</dd>
                            <dd>工作经验：1-3年</dd>
                            <dd>招聘人数：10人</dd>
                            <dd>最低学历：不限</dd>
                        </dl>

                        <dl class="g-position_list">
                            <dd>月薪：3000-5000元（个税计算）</dd>
                            <dd>年龄：不限</dd>
                        </dl>
                    </p>
                    <p class="clearfix"></p>
             </li>

##The above cliché css The usage of float is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed introduction to the usage of float in css, please pay attention to the PHP Chinese website!