图文详解CSS clear:both清除浮动的运用
当我们用div+css进行页面布局时,经常会出现一些意想不到的结果,比如画面排版乱了,没有呈现我们想要的样式,又或者设置一些属性不起作用,这些诡异的事情都非常让人头疼。其实,这些都出乎意料的事情是由浮动float引起的,它也是有解决办法的。这篇文章就给大家介绍如何用clear:both清除浮动,从而使页面回归正常。还不了解clear both的同学,可以参考一下,希望对你有用。
首先,大家应该清楚浮动float的一些特点。如果给元素设置了浮动,这个元素就相当于块级元素,并且可以对其设置宽和高;浮动会使其后面的元素脱离标准流;若父元素里的子元素全为浮动元素,父元素高度自适应问题。
1、CSS clear属性
属性值:
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
写法示范:#box{clear:both/left/right/none}
2、clear:both清除浮动的适用场景
在页面布局时,使用了浮动以后,导致页面排版混乱,这时我们通常会用clear:both来清除浮动。举个常见的例子,一个大盒子里面有两个小的盒子,大盒子没有设置高度,并且对小盒子使用了css float样式,这时大盒子的背景或边框不能正常显示,那么我们就需要使用clear:both来清除浮动,使页面恢复正常。
3、clear:both的运用实例
描述:设置外面大盒子的长度为500px ,不给他高度,让它自己撑起来,它的边框(css border)为红色,背景(css background)为粉色。大盒子里面有两个小的盒子,一个设置float:right,另一个设置float:left,背景颜色都为绿色,宽度为200px,高度为150px。接下来我们观察一下,看浮动产生了什么效果。代码如下:
HTML部分:
<div class="box"> <div class="left">左浮动left</div> <div class="right">右浮动right</div> </div>
CSS部分:
.box{width:500px;background:pink;border:1px solid #F00;padding:5px;} .left,.right{background:#008000;width:200px;height:150px;} .left{ float:left;} .right{ float:right;}
效果图:
两个小盒子呈现了我们想要的效果,一个左浮动,一个右浮动,但是我们的大盒子没有被撑开,这种现象就是由于浮动引起的。接下里就用clear:both清除浮动,看看能不能使大盒子被撑开。
我们在大盒子的
HTML部分:
<div class="box"> <div class="left">左浮动left</div> <div class="right">右浮动right</div> <div class="clear"></div> </div>
CSS部分:
.box{width:500px;background:pink;border:1px solid #F00;padding:5px;} .left,.right{background:#008000;width:200px;height:150px;} .left{ float:left;} .right{ float:right;} .clear{clear: both;}
效果图:
看图一目了然,可以使用clear来清除float产生的浮动。注意clear样式对象的添加位置,在此对象div标签结束前加入即可清除内部小盒子产生浮动。一般常用clear:both来清除浮动,至于其它clear:left和clear:right这里不做示范,有需要的小伙伴可以自己动手实践,看看呈现什么样的效果。
以上是图文详解CSS clear:both清除浮动的运用的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
