浮动笔记

一.标准文档流：元素根据块级元素或行内元素的特性按从上到下、从左到右的方式自然排列。

二.display属性用法：display：block/ inline / inline-block / none;

1.display：block; 块级元素默认值，，元素会被显示为块级元素，该元素前后会带有换行符

2.display：inline；行内元素默认值，元素会被显示为行内元素，该元素前后没有换行符

3..display：inline-block；行内块级元素，元素既具有行内元素特性，也具有块级元素特性

4.display：none; 设置元素不显示

三.浮动：float: left/right/none;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
    <!--<div class="aa"></div>-->
</div>

</body>
</html>

div {
}
#father {
    border:1px #000 solid;
    width: 700px;
    overflow: hidden;
}
.layer01 {
    border:1px #F00 dashed;
    float: left;
}
.layer02 {
    border:1px #00F dashed;
    float: left;
}
.layer03 {
    border:1px #060 dashed;
    float: left;
}
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    float: left;
}
/*.layer04{*/
    /*clear:both;*/
/*}*/

/*.aa{*/
    /*clear: both;*/
/*}*/

三.清楚浮动：clear: left /right / both;

四.解决父级边框塌陷方法：

　　1.浮动元素后面加空div

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>

#father {
   border:1px #000 solid;
   width: 700px;
   overflow: hidden;
}
.layer01 {
   border:1px #F00 dashed;
   float: left;
}
.layer02 {
   border:1px #00F dashed;
   float: left;
}
.layer03 {
   border:1px #060 dashed;
   float: left;
}
.layer04 {
   border:1px #666 dashed;
   font-size:12px;
   line-height:23px;
   float: left;
}
.layer04{
   clear:both;
}

.aa{
   clear: both;
}

　　</style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
    <div class="aa"></div>
</div>

</body>
</html>

　　2.设置父元素高度

　　3.父级元素添加 overflow ,缺点是定位的元素超出父级盒子时，将出现超出部分被隐藏。取值有：overflow:visible; (默认值，内容不会被修剪，出现在盒子外)，

　　　　overflow: hidden; 内容会被修剪，且其余内容不可见

　　　　overflow:sroll; 内容会被修剪，且浏览器会显示滚动条以便查看其余内容

　　　　overflow: auto; 若内容被修剪，浏览器会显示滚动条以便查看其余内容

如：

#father{
            border: 1px solid red;
            overflow:hidden;
　　　　}

　　4.给父级添加伪类 after

.clear:after{
            content:'';
            display: block;
            clear: both;
                }

猜你喜欢