说一说浮动?
得分点:脱离文档流、盒子塌陷、影响其他元素排版、伪元素、overflow:hidden、标签插入法。
回答:浮动的作用有:设置浮动的图片,可以实现文字环绕图片。设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高,同时可以按照浮动设置的方向对齐排列盒子。
设置浮动元素的特点:设置了浮动,该元素脱离标准流,元素不占位置。浮动可以进行模式转换(行内块元素)浮动造成的影响,使盒子脱离文档流,如果父级盒子没有设置高度,需要被子盒子撑开,那么这时候父级盒子的高度就塌陷了,同时也会造成父级盒子后面的兄弟盒子布局受到影响,如果浮动元素后面还有其他兄弟元素,其他兄弟元素的布局也会受到影响。
清除浮动的方法:
(1)伪元素清除浮动:给浮动元素父级增加。
(2)overflow:hidden:给父元素增加overflow:hidden属性。
(3)额外标签法:给浮动元素父级增加标签。
加分回答:三种清除浮动方法的特点和影响:伪元素清除浮动不会新增标签,不会有其他影响,是当下清除浮动最流行的方法。overflow:hidden不会新增标签,但是如果父级元素有定位元素超出父级,超出部分会隐藏,在不涉及父级元素有超出内容的情况,overflow:hidden比较常用,写法方便简洁。标签插入法清除浮动的语法加在新增标签上,由于新增标签会造成不必要的渲染,所以这种方法目前不建议使用。