What is the class name for clearing floats in bootstrap

WBOY
Release: 2022-05-07 17:20:03
Original
2364 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:

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




    
    
    
    Document
    

测试一
测试二
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!