您的位置：首页 > Web前端 > CSS

CSS 浮动的灵活应用

2019-07-28 18:59 169 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/blances/article/details/97617934

CSS 浮动的灵活应用

一、什么是浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、应用方法

1、传统方法

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[class^="item"]{
background-color:#f5f5f5;
display:block;
border: solid 1px black;
}
.left{
float: left;
}
.container{
background-color:#ff000052;
}
</style>
</head>
<body>
<div class="container">
<div class="item1 left">1</div>
<div class="item2 left">2</div>
<div class="item3 left">3</div>
<div class="item4 left">4</div>
<div class="item5 left">5</div>
<div class="item6 left">6</div>
<div style="clear:both"></div>
</div>
<div>7<div>
</body>

传统方法在每一个浮动的标签块沉底的时候增加一个div属性赋予clear:both，虽然可以实现，但是每一次都需要去写这个div。

结果：

2、灵活方法

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[class^="item"]{
background-color:#f5f5f5;
display:block;
border: solid 1px black;
}
.left{
float: left;
}
.container{
background-color:#ff000052;
}
.clearfix:after{
content:'.';
display:block;
clear:both;
visibility:hidden;
height:0;
}
</style>

</head>
<body>
<div class="container clearfix">
<div class="item1 left">1</div>
<div class="item2 left">2</div>
<div class="item3 left">3</div>
<div class="item4 left">4</div>
<div class="item5 left">5</div>
<div class="item6 left">6</div>
</div>
<div>7<div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航