How to clear floating styles in bootstrap-Mysql Tutorial-php.cn

How to clear floating styles in bootstrap

WBOY

Release： 2022-06-21 17:03:24

Original

2150 people have browsed it

In bootstrap, you can use the ".clearfix" auxiliary class to clear floating styles. The auxiliary class is a set of tool classes provided by bootstrap to assist project development. You only need to clear the floating elements. Just set the class name to ".clearfix", and the syntax is "".

How to clear floating styles in bootstrap

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

How to clear floating styles in bootstrap

bootstrap provides a set of tool classes to assist in project development

The front desk is made of bootstrap. When I encounter something that needs to be cleared, I found a method after checking the information.

<div class="clearfix"></div>

Copy after login

Just add this where you need to clear the float!

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 清除浮动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>
</body>
</html>

Copy after login

Output result:

How to clear floating styles in bootstrap

##Set auxiliary class:

<div class="clearfix"    style="max-width:90%">
<div class="clearfix" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

Copy after login

Output result :

How to clear floating styles in bootstrap

Related recommendations:

bootstrap tutorial

The above is the detailed content of How to clear floating styles in bootstrap. For more information, please follow other related articles on the PHP Chinese website!