Home > Article > Web Front-end > What is the class name for clearing floats in bootstrap
What is the class name for clearing floats in bootstrap
- WBOYOriginal
- 2022-05-07 17:20:032548browse
The class name for clearing floats in bootstrap is clearfix; clearfix is an auxiliary class in bootstrap. You can easily clear floating point numbers by adding ".clearfix" to the parent element. The syntax is "
".
The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer
bootstrap clears floating What is the class name?
We know that clearing floats is a very tedious task when writing static pages.
So general CSS frameworks will have styles used to clear floats.
In bootstrap, this style is called clearfix.
Just add clearfix to the parent element of the floating element that needs to be cleared.
Clearfix is used to easily clear floating point numbers by adding .clearfix to the parent element
The syntax is similar:
<div class="clearfix">...</div>
Examples are as follows:
Create a new html file, named test.html, to explain which class to use to clear floats in bootstrap. Use the link tag to load the bootstrap.min.css file.
Inside the div tag, use div to create two lines of text. Add the class attribute to the outer div, and set its width to 350px, height to 100px, and background color to gray through class.
Add another div before the two inner divs, and add the clear floating class name clearfix to it, so that the floating of the upper and lower divs does not affect each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
<style>
.mytest{
width:400px;
height:50px;
background:#ccc;
}
</style>
<div class="mytest">
<div class="pull-left">测试一</div>
<div class="clearfix"></div>
<div class="pull-left">测试二</div>
</div>
</body>
</html>Open the test.html file in the browser to check the effect.
Related recommendations: bootstrap tutorial
The above is the detailed content of What is the class name for clearing floats in bootstrap. For more information, please follow other related articles on the PHP Chinese website!