目录
bootstrap清除浮动的类名是什么
首页 web前端 前端问答 bootstrap清除浮动的类名是什么

bootstrap清除浮动的类名是什么

May 07, 2022 pm 05:20 PM
bootstrap

bootstrap中清除浮动的类名是clearfix;clearfix是bootstrap中的一个辅助类,可以通过将“.clearfix”添加到父元素的方式来轻松清除浮点数,语法为“”。

bootstrap清除浮动的类名是什么

本教程操作环境:Windows10系统、bootstrap3.3.7版、DELL G3电脑

bootstrap清除浮动的类名是什么

我们知道,在静态页面的编写中,清除浮动是一件很繁琐的事情。

所以一般的CSS框架都会有用来清除浮动的样式。

在bootstrap中,这个样式叫 clearfix.

只要在需要清除浮动的元素的父元素加上clearfix就可以了。

Clearfix用于通过将.clearfix添加到父元素来轻松清除浮点数

语法类似:

<div class="clearfix">...</div>
登录后复制

示例如下:

新建一个html文件,命名为test.html,用于讲解bootstrap中清除浮动使用哪个类。使用link标签加载bootstrap.min.css文件。

在div标签内,再使用div创建两行文字。给外层div添加class属性,并通过class设置它的宽度为350px,高度为100px,背景颜色为灰色。

在内层两个div之前,再添加一个div,并给它添加清除浮动类名clearfix,实现上下两个div的浮动相互不影响。

<!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>
登录后复制

在浏览器打开test.html文件,查看实现的效果。

30.png

相关推荐:bootstrap教程

以上是bootstrap清除浮动的类名是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

bootstrap怎么引入Eclipse bootstrap怎么引入Eclipse Apr 05, 2024 am 02:30 AM

bootstrap怎么引入Eclipse

bootstrap怎么引入idea bootstrap怎么引入idea Apr 05, 2024 am 02:33 AM

bootstrap怎么引入idea

bootstrap中介效应检验结果怎么看stata bootstrap中介效应检验结果怎么看stata Apr 05, 2024 am 01:48 AM

bootstrap中介效应检验结果怎么看stata

大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 Apr 23, 2024 pm 03:28 PM

大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五

bootstrap中介检验结果怎么看 bootstrap中介检验结果怎么看 Apr 05, 2024 am 03:30 AM

bootstrap中介检验结果怎么看

怎么用bootstrap检验中介效应 怎么用bootstrap检验中介效应 Apr 05, 2024 am 03:57 AM

怎么用bootstrap检验中介效应

bootstrap和springboot有什么区别 bootstrap和springboot有什么区别 Apr 05, 2024 am 04:00 AM

bootstrap和springboot有什么区别

bootstrap检验中介效应stata命令结果怎么导出来 bootstrap检验中介效应stata命令结果怎么导出来 Apr 05, 2024 am 03:39 AM

bootstrap检验中介效应stata命令结果怎么导出来

See all articles