网站维护的基本内容包括哪些,重庆市公共资源交易网,wordpress 新浪微博,和17做网店一样的货源网站目录
前言
开篇
中篇
原因
解决方式
1额外标签得方法
2触发BFC overflow
3伪元素
4双伪元素
结尾
前言
师傅#xff08;路人甲#xff09;小徒弟#xff08;路人乙#xff09;,自从路人乙昨晚没有被叫去摆地摊之后。早上一起床
路人甲:徒儿#xff0c;昨晚休…目录
前言
开篇
中篇
原因
解决方式
1额外标签得方法
2触发BFC overflow
3伪元素
4双伪元素
结尾
前言
师傅路人甲小徒弟路人乙,自从路人乙昨晚没有被叫去摆地摊之后。早上一起床
路人甲:徒儿昨晚休息得如何
路人乙:师傅休息得不错。
路人甲:你去后山得秘境修炼一番会遇到一些困难挫折
路人乙:好的师傅 开篇
说着就屁颠屁颠得来到了后山守门得是一致巨兽(路人丙
路人丙:你个小娃娃要想从我这里过需要回答一个问题
路人乙:你说我保证能答得上
路人丙:清除浮动得常见方法有哪些有什么优缺点
路人乙:这种问题有什么意义呢 路人丙:
清除浮动得原因
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题
那么如何解决这个问题呢
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}
/stylebodydiv idcontainerdiv idtudi徒弟/divdiv idjushou巨兽/div/divdiv idshifu师傅/div
/body/html 中篇
路人乙:第一种方式
额外加标签
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
/stylebodydiv idcontainerdiv idtudi徒弟/divdiv idjushou巨兽/divdiv idclear我来帮你了/div/divdiv idshifu师傅/div
/body/html 路人丙:还有其他得方式吗 这种方式
优点通俗易懂方便
缺点添加无意义标签语义化差
路人乙:不是说好一种吗 实现就可以了不是吗
路人丙:最起码三种以上 不然别想通关
路人乙:第二种 触发BFC规范
父级加overflow
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#container {border: 1px solid red;overflow: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
/stylebodydiv idcontainerdiv idtudi徒弟/divdiv idjushou巨兽/div/divdiv idshifu师傅/div
/body/html 路人丙:还有吗
优点代码简洁
缺点内容增多的时候容易造成不会自动换行导致内容被隐藏掉无法显示要溢出的元素
路人乙:第三种
使用伪元素清除浮动
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#container {border: 1px solid red;}.clear:after {/*伪元素是行内元素 正常浏览器清除浮动方法*/content: ;display: block;height: 0;clear: both;visibility: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
/stylebodydiv idcontainer classcleardiv idtudi徒弟/divdiv idjushou巨兽/div/divdiv idshifu师傅/div
/body/html 路人丙:
优点符合闭合浮动思想结构语义化正确
缺点ie6-7不支持伪元素after使用zoom:1触发hasLayout.
看你天资聪颖我再告知一种你便可以过去了。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style#container {border: 1px solid red;}.clear:after,.clear:before {content: ;display: table;}.clear:after {clear: both;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
/stylebodydiv idcontainer classcleardiv idtudi徒弟/divdiv idjushou巨兽/div/divdiv idshifu师傅/div
/body/html 结尾
路人乙听完路人乙匆匆离开了
我是歌谣 该问题取自面经 欢迎一起讨论交流 一个沉迷于故事得讲述者。
