Float (float)
Click on the image material needs or contact me private letters, comments
Normal flow (normal flow)
A lot of people the word translated as document flow, ordinary literal translation can flow or standard flow.
We have said before, the core layout of the page is to use CSS to display box location. How to put the box to the right place?
CSS positioning three mechanisms: normal stream (stream standard), floating and positioning.
html language which is another very important concept ---------- standard flow! Or normal flow. Normal stream is actually a normal element tag page from top to bottom, left to right, meaning the order, such as block-level elements will be on a separate line, the line elements are arranged in order in turn before and after; arranged according to the layout of this premise under absolutely no circumstances exceptions called ordinary flow layout.
Float (float)
Floating was first used to control the picture, in order to achieve other elements (particularly text) to achieve "surround" picture effect.
Later, we found floating there is a very interesting thing: that his party can make any box arrangement, so we slowly off topic, with floating features to the layout.
What is floating?
Float means floating elements provided attributes may control standards from the normal stream, the process moves to the parent element in the specified position.
In CSS, defined by the floating float property, the basic syntax is as follows:
选择器{float:属性值;}
| Property Value | description |
|---|---|
| left | Left-floating element |
| right | Elements float right |
| none | Elements do not float (default) |
Floating detailed insider properties
Floating out of the standard flow, not accounting for the location will affect the standard flow. Floating just floating around.
First, the concept of creating a floating (package) containing block. That is, the floating element always manage to find its nearest parent element alignment. But not beyond the scope of padding.
Floating element arrangement positions, to keep one element (block level) relationship. If a floating element, the top element A and will be aligned on top of an element; if the element is a standard flow, the top and bottom of the element A will be aligned on an element.
After the move, the element may have properties within the row block elements. It depends entirely on the size of the element defined size, or default content to display the corresponding number of floating elements float in accordance with the writing position.
The purpose is to allow the floating plurality of block elements on the same lines.
float float drain special
- Floating: plus floating elements float in the box is floating on top of the box other flow criteria.
- Leakage: plus floating box, does not account for the location, it floats, and the drain to its original position in the cassette standard streams.
- Patent: Special attention, the parent first floating boxes and require the use of standard flow with, particular attention followed floating elements can be embodied as rows in the display mode block properties.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
* {
margin:0;
padding:0;
}
.father {
border:1px solid black;
}
.son {
width:100px;
height:100px;
border:1px solid grey;
background-color:#abcdef;
/* 左浮动：能消除默认的间隙 */
float:left;
/* 右浮动：能消除默认的间隙，从右到左排列
float:right; */
/* 浮动的元素，margin:0 auto;不生效 */
/* 浮动：①能消除默认的间隙；
②脱离了标准文档流，没有占位置，不回撑开父级；
③里面的元素或文字会环绕着浮动元素而解析；
④基于父元素；
⑤ */
}
/* 因为浮动不占位置，影响了布局，所以要清除浮动 */
/* 清除浮动：①clear:both;样式值，清楚两端的浮动，加一个空div，设置清除浮动的属性，哪里用完浮动，就放在那里;
②给父级元素添加一个属性：overflow:hidden;
③用after伪元素清除浮动：content:""; */
p {
height:400px;
background-color:lightblue;
/* 本意：溢出隐藏 */
overflow:hidden;
}
/*.clearFix {
clear:both;
}*/
/* 清除浮动的方法3：利用伪元素创建隐藏占位的空div */
/*:: after伪元素：在当前元素中的后置位加了一个行内元素*/
.clearFix {
/* 不可缺少的属性，内容为空 */
conten:"";
display:block;
height:0;
/* 隐藏，但是占位置的隐藏； display:none-不占位置的隐藏; */
visibility:hidden;
clear:both;
}
span {
width:200px;
height:200px;
background-color:yellow;
float:left;
}
</style>
</head>
<body>
<div class="father clearFix">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<!-- 1、添加一个清除浮动的div -->
<div class="clearFix"></div>
</div>
<p></p>
</body>
</html>