浮动

网页基本布局:常见网页布局、标准文档流
标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列
文档流:元素默认是根据自身特性排列的,及标准文档流
       设置浮动后元素会脱离文档流
组成   块级元素(block)
             <h1>…<h6>、<p>、<div>、列表…
       内联元素(inline)
             <span>、<a>、<img/>、<strong>...
$注释: 内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立

display属性  ****
 值                说明
block              块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline             内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
inline-block       行内块元素,元素既具有内联元素的特性,也具有块元素的特性
none               设置元素不会被显示

示例:display:block;
     display:inline;
     display:inline-block;
     display:none;

display特性:块级元素与行级元素的转变(block、inline)
            控制块元素排到一行(inline-block)
            控制元素的显示和隐藏(none)

 浮动 ----- float

所以综上所述,浮动具有以下特点: 
1)破坏了流式布局
2)块级元素浮动后具有包裹性
3)让行级元素浮动后变成了块级元素
float属性
属性值 说明 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动,并会显示在其文本中出现的位置 案例: <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> </body> </html> 示例.layer01 { .layer01 { border:1px #F00 dashed; border:1px #F00 dashed; float:left; float:right; } } .layer02 { .layer02 { border:1px #00F dashed; border:1px #00F dashed; float:left; float:right; } }

  清除浮动 ------ clear属性

clear属性
  值            说明
 left          在左侧不允许浮动元素
 right         在右侧不允许浮动元素
 both          在左、右两侧不允许浮动元素
 none          默认值。允许浮动元素出现在两侧
使用这个属性,要求元素必须是块级的。
使用方法:1,给父元素添加一个空的块级元素,
        2、不让这个空的块级元素浮动,并给他添加clear:both; 示例:img { clear:both; //清除两侧浮动 }
clear:left; //清除左浮动 clear:right; //清除右浮动

 解决父级边框塌陷的方法

解决父级边框塌陷的方法:    *****
    浮动元素后面加空div
    设置父元素的高度
    父级添加overflow属性
    父级添加伪类after,清除浮动clear

overflow属性
    属性值	   说明
    visible	   默认值。内容不会被修剪,会呈现在盒子之外
*** hidden	   内容会被修剪,并且其余内容是不可见的
    scroll	   内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
    auto	   如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容  
清除浮动,防止父级边框塌陷的四种方法
浮动元素后面加空div:空div会造成HTML代码冗余
.clear{  clear: both;  margin: 0; padding: 0;}
<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 class="clear"></div>
</div>

设置父元素的高度:固定高度会降低元素可扩展
#father {height: 400px; 
               border:1px #000 solid; }
<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>

父级添加overflow属性:有下拉列表框场景不能用
#father {overflow: hidden;
              border:1px #000 solid; }
<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>

父级添加伪类after:没有副作用,推荐使用
.clear:after{
    content: ''; 
    display: block;          
    clear: both;
}
<div id="father" class="clear">
  <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>

  

  

 

上一篇:java – HashMap.clear()是否将内部哈希表的大小调整为原始大小?


下一篇:elasticsearch索引清理脚本shell