zoukankan      html  css  js  c++  java
  • 详解CSS中clear属性both、left、right值的含义

    前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度“清除浮动”,导致中间有点小误会。后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助。

    clear的值有四个

    1. none:允许两边都可以有浮动对象;
    2. both:不允许有浮动对象;
    3. left:不允许左边有浮动对象;
    4. right:不允许右边有浮动对象。

    老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如clear:right的解释是“不允许右边有浮动对象”,我一直以为是清除自身右方(下方)容器的浮动。但其实不是。下面一个一个DEMO的看,希望你能懂left和right到底是清除哪里的浮动。

    一、普通浮动,无清除浮动,外容器塌陷:DEMO

    二、左浮动,clear:both清除浮动:DEMO

    三、右浮动,clear:both清除浮动:DEMO

    四、左右浮动,clear:both清除浮动:DEMO

    五、左浮动,清除左浮动,左浮动,未清除浮动的塌陷:DEMO

    六、右浮动,清除右浮动,左浮动,未清除浮动的塌陷:DEMO

    (浮动外层容器加了背景色,如果此元素没有浮动,背景色即会包住他,反之则包不住)

    很多人清除浮动喜欢在浮动容器后面加一个空div,div加clear:both,即第二、三、四(因为我加了宽高,一般清除浮动的div都是0,所以看不见),我个人不是很喜欢这种。重点看第五和六,clear什么,就清除自身前面容器对应的浮动。例如五红色是左浮动,那么黄色clear:left就是清除自身前面红色的左浮动,而清除不了后面蓝色的左浮动。六里红色是右浮动,那么黄色clear:right就是清除自身前面红色的右浮动。至于二、三、四里的clear:both,左右浮动都可以清除。

    总结:加clear的容器,只能清除自身之前的容器浮动,并且清除浮动方向对应。

    <参考:http://ons.me/434.html>

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    VScode 修改中文字体
    missing KW_END at ')' near '<EOF>'
    SQL inner join, join, left join, right join, full outer join
    SQL字符替换函数translater, replace
    SQL COOKBOOK SQL经典实例代码 笔记第一章代码
    sqlcook sql经典实例 emp dept 创建语句
    dateutil 2.5.0 is the minimum required version python
    安装postgresql后找不到服务 postgresql service
    Postgres psql: 致命错误: 角色 "postgres" 不存在
    【西北师大-2108Java】第十六次作业成绩汇总
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/css_clear_left_right_both.html
Copyright © 2011-2022 走看看