float 模型属性
left: 向左浮动
right: 向右浮动
float 模型需要注意的几点
块级元素和行内元素 (行内元素不可指定宽高) 都可以浮动, 当一个行内元素浮动以后将会自动变为一 个块级元素, 即使设置 display:inline 以后其依然是个块元素
当一个元素浮动以后, 其下方的元素会上移. 元素中的内容将会围绕 在元素的周围.
元素浮动以后即完全脱离文档流, 不再在文档中在占用位置. 也不会再影响父元素的高度, 也就是浮动元素不会撑开父元素. 这是由于浮动流所产生的, 下面我们来讨论如何解决浮动流问题.
清除浮动流的方法
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- *{
- margin: 0px;
- padding: 0px;
- }
- /* 利用父级元素伪元素来清除浮动流, 可以解决父级元素未设置高 float 影响四周和塌陷问题 */
- .clearfix::after{
- content: " ";
- height: 0px;
- visibility: hidden;
- display: block;
- clear: both;
- }
- /* 上面就是利用伪元素清除浮动流的代码 */
- .wrapper{
- width: 400px;
- border: 1px solid black;
- }
- .content1{
- height: 100px;
- width: 100px;
- background-color: red;
- float: left;
- }
- .content2{
- height: 100px;
- width: 100px;
- background-color: green;
- float: left;
- }
- .content3{
- height: 100px;
- width: 100px;
- background-color: blue;
- float: left;
- }
- </style>
- </head>
- <body>
- <div class="wrapper clearfix">
- <div class="content1"></div>
- <div class="content2"></div>
- <div class="content3"></div>
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/06daf97ac66e