CSS Styles - How to clear element floats?-CSS Tutorial-php.cn

CSS Styles - How to clear element floats?

PHP中文网

Release： 2017-06-22 15:22:29

Original

1538 people have browsed it

Clearing floating is a problem that those who work on the front end should be very familiar with. Here are 4 methods for your reference

1.Use clear:both to clear floats

##css

Example2:

##Example1: Use p
##html code	code
## .box{ width:300px;margin:0 auto;border:10px solid #000;}	.p{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;overflow : hidden;}
Use
	.box{ width:300px;margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;}
示例3：伪类对象::after+zoom:1(推荐使用)
	.box{margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1;} .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.Use the overflow attribute

3.Use the display attribute

##html code

csscode

##.box{ width:300px;border:1px solid #000;

overflow:auto;}

.p1{ width:260px;height:400px;background:Red;float:left ;}

Note: overflow:auto;、overflow:hidden;It will be all right

##.box{ width:300px;margin:0 auto;border:10px solid # 000; display:inline-block;}

##html code

csscode

.p{ width:200px;height:200px;background:red;float:left;}

Note: The parent element cannot be centered horizontally. Use

text-align:center

on the parent element to solve the problem

4.Parent element float

##html code

cssCode

##< ;/p>

##.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.p{ width:200px;height:200px;background:red;float:left;}

Note: The parent element cannot be horizontally centered, you can use Positioning solution

position: relative;

left: 50%;

margin-left: -150px;

The above is the detailed content of CSS Styles - How to clear element floats?. For more information, please follow other related articles on the PHP Chinese website!