css浮动

时间 2019-11-12

标签 css 浮动栏目 CSS 繁體版

原文原文链接

1）能够看出，即便div1 的宽度很小，页面中一行能够容下div1 和div2，div2 也不会排
在div1 后边，由于div 元素是块级元素，独占一行的。
2）如何在一行显示多个div 元素
3）显然默认的标准流已经没法知足需求，这就要用到浮动。浮动能够理解为让某个div
元素（或者其余块级元素）脱离标准流，漂浮在标准流之上。
4）例如，假设上图中的div2 浮动，那么它将脱离标准流，但div一、div三、div4 仍然在标
准流当中，因此div3 会自动向上移动，占据div2 的位置，从新组成一个流。如css

float:left;/*向左边浮动*/html

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮动</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

clear:left;/*清除左浮动*/html5

clear:both;不容许浮动
git

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮动</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
                clear:left;/*清除左浮动*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

若是连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，而且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。github

        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;
        float:left;/*向左边浮动*/} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
        float:left;/*向左边浮动*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;
        float:left;/*向左边浮动*/}