What is the class name for clearing floats in bootstrap-Front-end Q&A-php.cn

What is the class name for clearing floats in bootstrap

WBOY

Release： 2022-05-07 17:20:03

Original

2572 people have browsed it

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 "".

What is the class name for clearing floats in bootstrap

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>

Copy after login

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>

Copy after login

Open the test.html file in the browser to check the effect.

What is the class name for clearing floats in bootstrap

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!