CSS布局-浮动布局
时间：2023-09-06 22:48:02 | 来源：网站运营
时间：2023-09-06 22:48:02 来源：网站运营
CSS布局-浮动布局：当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到
另外一个浮动的元素。
一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因）
浮动规则
- 浮动元素会被推到他的容器的边缘。
- 任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动，那么第二个元素将会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。
- 左浮动的盒子不能出现在右浮动盒子的右边。
- 浮动元素不能高过他的容器的上边缘（当涉及到塌陷的边距这将会更复杂，请参考最初的规则）。
- 浮动元素不能比前一个块级元素或浮动元素高。
- 浮动元素不能高过前一行内联元素。
- 靠着另一个浮动元素的浮动元素不能超出自己的父容器边缘。
- 一个浮动的盒子必须尽可能的高的放置。
- 一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高。
浮动影响
包裹性包裹性就是父元素的宽度会收缩到和内部元素宽度一样。
浮动之所以会产生包裹性这样的效果是因为
float属性会改变元素display属性最终的计算值。
设置float前的display属性——》设置浮动后的display属性计算值
- inline——》block
- inline-block——》block
- inline-table——》table
- table-row——》block
- table-row-group——》block
- table-column——》block
- table-column-group——》block
- table-caption——》block
- table-header-group——》block
- table-footer-group——》blcok
- flex——》
flex - inline-flex——》
inline-flex【inline-flex在chrome下测试，float后display:flex】 - other——》unchanged
破坏性这里破坏性是指元素浮动后可能导致父元素高度塌陷。
其他破坏性的属性：
- display:none
- position:absolute/fixed/sticky
浮动破坏性原理：
因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。
清除浮动
每种清除浮动的方法都有弊端，权衡后推荐用法：
.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
/*兼容IE6和IE7*/
.clearfix{
*zoom:1;
}
float布局和inline-block布局对比
浮动和inline-block都能让元素排成一排，那么应该如何抉择？下面对比一下。
- 文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。
- 水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。
- 垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。
- 空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。
在线咨询
