CSS float,浮动与清除浮动
什么是float?
CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
而当初为了实现图片被文字环绕的效果,于是才有了float,与此同时也关乎HTML的默认文档流布局,也就是从上至下,从左到右,块级元素换行等等
属性
left
表明元素必须浮动在其所在的块容器左侧的关键字。
right
表明元素必须浮动在其所在的块容器右侧的关键字。
none
表明元素不进行浮动的关键字。(默认)
inline-start
关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
inline-end
关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。
float:left
创建两个div与两个input的标签,为他们设置宽高,并且同时设置float:left,效果如下
1.一般情况下
全部紧贴在一起了(一行),并且右侧留有空余
2.缩小浏览器的情况下
input会根据自身情况选择换行
float:right
依葫芦画瓢,把这四个标签全部修改为float:right
1.一般情况下
左侧留有空余
2.缩小浏览器的情况下
左侧留有空余,并同时换行
以上关于float:left和float:right的四个小例子其实可以得知浮动的核心就是,浮动的元素会脱离文档流从而向左或向右浮动,直至碰到另一个浮动元素或者父元素为止.
关于浮动的特征##
在刚才介绍float属性的时候,为了方便测试,就将<body>加上了边框效果,从效果上来说,其实已经的得出了浮动的特征.
首先从边框的效果可以得知,父元素的高度是由子元素决定的,因为他们现在仍属于文档流
再举个例子,将所有的元素再次添加 float: right
再将body的高度设置为10px,同时拉伸当前浏览器的宽度,这样效果更明显
从图上效果进行对比得知,添加了浮动会使其脱离文档流,使其对整个页面的布局造成巨大的影响.浮动元素脱了文档流,从而也不会占据文档流的位置,也不可能再将body撑开,因此body失去了高度,被坍缩.效果就像PS里的画布一样被分了层.以此同时,在浮动元素都设置了相同方向的时候(向左/向右),会以碰到另一个相同方向的浮动元素为止.这是浮动元素内联排列的特征.我们在回到图中还能看到一个有趣的现象,input与div,行内元素与块元素处在一行,这从侧面也反映了浮动另一特征:浮动元素会生成块元素,无论它原来是什么元素(块元素,行元素)。
浮动特征总结:
1.浮动元素会脱离文档流
2.浮动会导致父元素高度坍塌
3.浮动可内联排列
4.行内元素浮动后，将变成块元素
清除浮动 clear
**clear
** CSS 属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。
属性:
1.left : 不允许左边有浮动对象
2.right : 不允许右边有浮动对象
3.both : 不允许有浮动对象
4.none : 默认值。允许两边都可以有浮动对象
5.inline 继承
粗暴清除浮动
这是最简单的一种清除浮动的方式,在浮动元素后面加一个任何标签并样式设置clear:both即可
向这种clear:both的方式和clear:left 与clear:right 都属于那种简单粗暴来实现清除浮动的效果.虽简单,但是不利于维护.
1.clear:both是一个空的div,页面复杂,则需要添加大量的,无语意的html元素,不易维护
2.给浮动的元素的容器添加浮动(为容器添加clear:left 和clear:right )破坏了原有的布局,使整体浮动,需酌情处理
这两种不推荐使用!!!
CSS的:after伪元素清除浮动
仍然是依照上面的例子,为其添加了after伪元素
.clearfix:after {
display: table;
content: " ";
clear: both;
}
其实还可以这么理解
清除浮动的作用只是仅仅只是清除浮动,不会改变原有浮动设置的方向,浮动的元素依然浮动.只是这个清除浮动的元素把父容器撑起来了
参考:
1.<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear ">MDN clear</a>
2.<a href="https://developer.mozilla.org/zh-CN/docs/CSS/float">MDN float</a>
其实还有更好的清除浮动方案
to be continued...
