直播课网站怎样做的,云服务器gpu租用,简洁 wordpress,做网站的费用 可以抵扣吗总结css重要知识点时#xff0c;再看了一遍张鑫旭大神的float博文#xff08;以及下一篇#xff09;#xff0c;加上自己的理解下下了对float的总结。 1.float最初是用来做什么的#xff1f;
float最初被发明其实只是用于让文字环绕图片#xff0c;但是因为其浮动性质再看了一遍张鑫旭大神的float博文以及下一篇加上自己的理解下下了对float的总结。 1.float最初是用来做什么的
float最初被发明其实只是用于让文字环绕图片但是因为其浮动性质越来越多的人将其应用到了布局当中所以引出了很多事情。。。
2.float有哪些特性
包裹性
float 让文字浮动到图片周围这就是包裹性 撇开浮动的“破坏性”浮动就是个带有方位的display:inline-block属性。 其实 display:inline-block 也具有包裹性 stylediv{background-color: red;}/style
/head
bodydiv11111111111/div
/bodydiv是块元素所以会占一行
div{background-color: red;display : inline-block;
}将div变为行内块元素不占一行了相当于div就包裹住了里面的内容这就是包裹性
当然float也有这种包裹性
div{background-color: red;float : left;
}不过float是有方向的包裹它可以向右包裹display : inline-block 只能向左包裹
破坏性
float的破坏性非常大它会破坏更准确来说应该是脱离正常的文档流。
有个哥们儿说的很形象浏览器的窗口其实是个立体的有好几层添加了float属性的元素就会脱离原来那一层跑到上一层上面它会盖住原来那层的一些东西。不知道这样理解对不对但我认为这样会很好理解
举例 style#temp1{background-color: red;width: 100px;height: 100px;}#temp2{background-color: blue;width: 300px;height: 300px;}#temp3{background-color: green;width: 200px;height: 200px;}/style
/head
bodydiv idtemp1/divdiv idtemp2/divdiv idtemp3/div
/body三个div都没有添加float属性则会这样从上到下正常显示
给第一个div添加float属性 第一个div脱离原来的那一层到上一层去了其他两个div会往上移占领第一个div的原有的位置。
给第一个第二个div都设置float 第一个第二个都 “上去了” 因为都在上面那层所以第二个div会浮动到第一个div右边会包裹着第一个div这就是包裹性。第三个占领它两个的原有位置。
给三个div都设置float属性 可想而知是并排的。。。
延申
display : inline-block 也是有包裹性如果我们将三个div的float属性都替换成 display : inline-block 会怎么样呢 如果你的三个div有间隔那是因为你的三个div之间有空格导致的改成下面这样就能解决了
div idtemp1/divdiv idtemp2/divdiv idtemp3/div) 为什么三个div会底部对齐呢因为三个现在都是行内块元素它们所在的这一行被高度最高的一个行内块元素撑着的所以就像是三个不同高度的方块放在一个容器里当然会底部对其啦
3.float产生的后果是什么
float产生的最常见的后果是父元素的高度塌陷 style#container{border: 2px solid black;}#containerdiv{width: 100px;height: 100px;background-color: red;}/style
/head
bodydiv idcontainerdiv/div/div给红色div添加浮动后 可看出来红色div的父元素container高度为零了这就是高度塌陷因为红色div相当于已经从父元素“出来了”父元素中没有内容能撑开它了所以就会高度塌陷。
解决高度塌陷的办法就是给父元素设置个高度。
4.清除浮动
这是未清除浮动的时候 style#temp1{background-color: red;width: 100px;height: 100px;float: left;}#temp2{background-color: blue;width: 300px;height: 300px;float: left;}#temp3{background-color: green;width: 200px;height: 200px;}/style
/head
bodydiv idcontainerdiv idtemp1/divdiv idtemp2/div/divdiv idtemp3/div
/body我们想清除浮动那该怎么办呢想让第三个div不被第一个第二个div的浮动影响让它呆在它原来的位置该怎么办呢
最推荐 1设置伪元素::after来解决
#container::after{display: block;clear: both;content: ;visibility: hidden;height: 0;
}给前两个div的父元素设置伪元素那么会在父元素后面插入一个伪元素让它清除浮动clear:both就不会影响后面的元素了。
要注意的是伪元素一定要设置content属性为空也行伪元素的display默认为inline这里要设置为display:blockclear:both是清除浮动 visibility: hidden;height: 0;都是为了这个伪元素不会在页面中显示出来。
2overflow:hidden;
#container{overflow : hidden;
}但是这个方法在碰到margin负边距排版时会产生意想不到的结果所以最好别这样用。
3直接在container后放一个div style“clear:both;”/div
这个会浪费一个标签并且只能使用一次还可能会影响后续布局所以别用。
