牧佑oneZeroZeroDayDream--after清除浮动

来源：互联网发布：linux 支持无线网卡编辑：程序博客网时间：2024/06/06 07:00

<!doctype html><html lang="zh"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="muyou">  <meta name="Keywords" content="牧佑叔叔">  <meta name="Description" content="牧佑">  <title>Document</title> <style> p {width:200px;border:1px solid #000; }p:after {content:"慧我爱你";background:red;display:block;} .box { weight:200px; border: 1px solid #000;  }.div1 {width:100px;height:100px;background:red;float:left;}.clear {zoom:1;}.clear:after {content:"";display:block;clear:both; } </style>  </head> <body> <!--box clear 清除浮动在父级样式class后面加一个空格.clear:after {content:"";display:block;clear:both; } -->

 <!-- 浮动定义：使元素脱离文档流，按照指定方向发生运动遇到父级边界或者相邻的浮动元素停下来文档流：是文档可现实对象在排列时所占用的位置float：left}right|none|inheritclear:left|right|both|none|inherit元素某个方向上不能有浮动元素clear:both左右两侧不允许浮动  -->

<!-- span 换行的时候 加空格 字体不一样空格大小不一样 去掉空格需要添加 float：left 即可--><!--父级浮动 页面中所有元素都加浮动margin左右自动失效inline-block 清浮动方法；问题 margin左右自动失效；--> <!--zoom:1; IE6 兼容display:block; 空标签设置成块级元素clear:both;  清除浮动。 --><!--after 伪类选择器 --> <!--清除浮动 都是在父级元素上面来做的 --><div class="box clear"><div class="div1"></div></div><!-- <p></p> -->   </body></html>

当给父级设置复合下面规则的时候 -----------------------------------------------------------------------------------------------------

子级是可以清除浮动的  -        ------------------------------------------------------------------------------------------------------

  <!-- BFC(block formatting context) 标准浏览器块级格式化上下文a. float的值不为noneb. overflow的值部位visiblec. display的值为table-cell，table-caption,inline-block中的任何一个d.position的值不为relative和statice.width|height|min-width|min—height:(!auto) haslayout IE浏览器 a.writing-mode:tb-rl b.-ms-writing-mode:tb-rl c.zoom:(!normal)    -->

阅读全文

0 0