css的属性操作(三)

块级标签：<div> <p> <h1-6> <u1> <o1> <d1>

内联标签：<a> <img> <input> <span> <select> <textarea>

正常文档流：将元素（标签）在进行排版布局的时候按着从上到下从左到右的顺序进行排版的一个布局流

脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局

float 浮动（非完全脱离）

position: absolute fixed　　定位（完全脱离）

9 float属性

先来了解一下block元素和inline元素在文档流中的排列方式。

　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

浮动的表现
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）

注意当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

现象1:

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

现象2:

(1)左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。

解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

(2)上下结构div盒子重叠现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

解决方法：

1、要么给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。

2、要么清除浮动。

清除浮动：
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

clear语法：clear : none | left | right | both
取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

方式1(推荐):

.clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容； 
content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block;               <----加入的这个元素转换为块级元素。 
clear: both;                  <----清除左右两边浮动。 
visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0;               <----行高为0； 
height: 0;                    <----高度为0； 
font-size:0;                  <----字体大小为0； 
} 
.clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

话说回来，你这段代码真是个累赘啊，这样写不利于维护。
只要写一个.clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。
如：

<div class="head clearfix"></div>

方式2：

overflow:hidden;

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

用pycharm新建test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>

<div>smoke</div>

</body>
</html>

点击pycharm上面浏览器

修改test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div>smoke</div>

</body>
</html>

点击pycharm上面浏览器

修改test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
            background-color: rebeccapurple;
            line-height: 100px;
        }
    </style>
</head>
<body>

<div>smoke</div>

</body>
</html>

点击pycharm上面浏览器

用pycharm新建float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>1</div>
<p>pp</p>
<a>222</a><span>span</span>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
        }
        .div3{
            background: yellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: blue;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }
        .top{
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>
<div class="top"></div>
<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

<!--<div class="outer">-->
<!--    <div class="menu1">菜单一</div>-->
<!--    <div class="menu2">菜单二</div>-->
<!--</div>-->

<!--<div class="bottom">底部</div>-->
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            clear: left;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

<!--<div class="outer">-->
<!--    <div class="menu1">菜单一</div>-->
<!--    <div class="menu2">菜单二</div>-->
<!--</div>-->

<!--<div class="bottom">底部</div>-->
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

<!--<div class="outer">-->
<!--    <div class="menu1">菜单一</div>-->
<!--    <div class="menu2">菜单二</div>-->
<!--</div>-->

<!--<div class="bottom">底部</div>-->
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            clear: left;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

<!--<div class="outer">-->
<!--    <div class="menu1">菜单一</div>-->
<!--    <div class="menu2">菜单二</div>-->
<!--</div>-->

<!--<div class="bottom">底部</div>-->
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

<!--<div class="outer">-->
<!--    <div class="menu1">菜单一</div>-->
<!--    <div class="menu2">菜单二</div>-->
<!--</div>-->

<!--<div class="bottom">底部</div>-->
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
            clear: both;
        }

    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
            clear: both;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
    <div class="clear"></div>
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
            height: 200px;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
            clear: both;
        }
        /*.clear{×/
            /×clear: both;×/
        /×}×/
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
<!--    <div class="clear"></div>-->
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
    <div class="clear"></div>
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

修改float.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            /*float: left;*/
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*float: left;*/
            float: right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            /*clear: left;*/
            clear: right;
        }

        .outer{
            background-color: rebeccapurple;
            overflow: hidden;
        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

<!--<div class="div1">111</div>-->
<!--<div class="div2">222</div>-->
<!--<div class="div3">333</div>-->

<div class="outer">
    <div class="menu1">菜单一</div>
    <div class="menu2">菜单二</div>
<!--    <div class="clear"></div>-->
</div>

<div class="bottom">底部</div>
</body>
</html>

点击pycharm上面浏览器

发表于 2022-03-30 21:41 深秋、阅读(35) 评论(0) 收藏举报

公告