400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】clear使用方法

【Web前端基础知识】clear使用方法

  • 发布: Web前端培训
  • 来源:Web前端干货资料
  • 2019-12-19 16:20:46
  • 阅读()
  • 分享
  • 手机端入口

此时,把中间的div元素clear值改成right,我们再来看

css代码如下:

.clear{ clear: right; }

增加第一个p标签的高度后

css代码如下:

p:nth-of-type(1){

height: 200px;

background-color: yellow;

}

按照文档中说明来看,应该是元素右侧不能有浮动元素,但第3个和第4个p标签一直都是没有变化的,相反,元素之前的右浮动元素撑开了父元素的高度。

再看看clear值为both,在值为both时修改第一个p元素的高度

css代码如下:

.clear{ clear: both; }

这种情况下,无论之前的是左浮动还是右浮动都可以清除掉

到这里,我们发现clear是清除掉元素之前的浮动元素

clear:left 清除这个元素之前元素的左浮动

clear:right 清除这个元素之前元素的右浮动

clear:both 清除这个元素之前元素的左浮动和右浮动

最后注意:clear属性只对块元素有效哦!!!

文章“【Web前端基础知识】clear使用方法”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2019/48200.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME