float讲解
1、float:该属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,但是仍然保持部分的流动性(与绝对定位相反)。
2、浮动最早是用来解决文字环绕的问题。
3、在style中给标签添加float属性即可。
4、浮动,会脱离文档流------不再保留原来位置,会造成在其下方的兄弟元素位置发生变化。
5、当子元素发生浮动时,其父元素的高度发生塌陷。
float ---可以左浮动,也可以右浮动
float: left; ---向左浮动
float: right; ---向右浮动
float问题解决办法
clear:该属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
添加clear属性------清除浮动
clear: both;
当应用于非浮动块时,它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。
另一方面,两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时,它将底部元素的外边界边缘移动到所有相关的浮动元素外边界边缘的下方。这会影响后面浮动元素的布局,因为后面的浮动元素的位置无法高于它之前的元素。