float浮动

来源：互联网发布：方孟韦程小云知乎编辑：程序博客网时间：2024/06/09 15:02

float浮动：

带有float浮动的元素会潜移默化的变成块状元素

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它

布局，也就是没有拖出文本流。

浮动的副作用：

使得元素脱离了标准流

浮动的元素不占原空间

父元素塌陷及其他元素异位

浮动副作用的解决：

1.手动给父元素添加高度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float</title>    <style>        .per{            width: 500px;            height: 32px;            border: 1px solid #000;                    }                .test{            width: 100px;            height: 30px;            background: red;            border: 1px solid #FFF;            float: left;        }    </style></head><body>    <div class="per">        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>                    </div></body></html>

2.通过clear清除内部和外部浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float</title>    <style>        .per{            width: 500px;            height: auto;            border: 1px solid #000;        }                .test{            width: 100px;            height: 30px;            float: left;            background: red;            border: 1px solid #FFF;        }                .clear{            clear: both;        }    </style></head><body>    <div class="per">        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>       <div class="test"></div>        <div class="test"></div>        <div class="test"></div>       <div class="test"></div>        <div class="test"></div>        <div class="test"></div>                        <div class="clear"></div>    </div></body></html>

3.给父元素添加overflow属性并结合zoom：1使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float</title>    <style>        .per{            width: 500px;            height: auto;            border: 1px solid #000;            overflow: hidden;/*处理溢出问题，弊端导致元素被截断*/            zoom:1;/*ie专用属性，使父元素拥有高度*/        }                .test{            width: 100px;            height: 30px;            background: red;            border: 1px solid #FFF;            float: left;        }    </style></head><body>    <div class="per">        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>    </div></body></html>

4.给父元素添加浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float</title>    <style>        .per{            width: 500px;            height: auto;            border: 1px solid #000;            float: left;        }        .test{            width: 100px;            height: 30px;            background: red;            border: 1px solid #FFF;            float: left;        }                .bro{            width: 100px;            height: 100px;            background: blue;            clear: both;        }    </style></head><body>    <div class="per">        <div class="test"></div>        <div class="test"></div>        <div class="test"></div>    </div>    <div class="bro"></div></body></html>

阅读全文

0 0