Float - CSS (Cascading Style Sheets - ). 1996 . CSS. CSS , , JavaScript. .
, Flexbox Position , . Float.
CSS Float - ?
Float - . , , . HTML CSS Float . , . , , . , Float CSS html-. Float, Property, .
, . -, , , , ( Float) , , .
CSS Float
Float -. , , , , . - . , Float, , .
Float :
- Float:inherit;
- Float:right;
- Float:left;
- Float:none;
, , Float . , , . :left; . ( ) bcgjkmpjdfybb :right;. :inherit; , . , html-. :none; , .
Float ?
Float CSS . , , . . Float, . - . , Google Chrome Ctrl + Shift + J. , , , , . . , , .
normal flow ( ). ( ) . - . , , CSS Float Left, . , .
, , , . , , , , . Float CSS.
Clear
Float - Clear. - . . , "", , Float (, CSS Float Top). , , . .
Clear :
- :left;
- :right;
- :both;
- :inherit;
- none;
, Clear. Float:right; (CSS- ), Clear:right;. Float:left; Clear:left;. Clear:both; , , , , Float. Inherit , none . , Float Clear, HTML CSS Float-, - .
Float
Float ( CSS Float -). , , . - , (navigation bar) , . :
, . , html-, (container). , Float, . , .
, #content #navigation. Float. #content , #navigation . . , . . , . , 45 % #content 45 % #navigation, 10 % margin.
Clear, #footer, #navigation #content, , . ? Clear? #footer - #navigation. - , #navigation . , Clear Float .
,
. . , , Float. , CSS, html-. , Float html-, . , - Float . .
, , , , . , , . , Float.
- , , Float, . , - Cear. , Clear .
- -. :
Position CSS Float. - Position . :absolute :relative, .
Position Float
, HTML CSS Float Position. . , #container #div.
#container {
width:40%;
float:left;
margin:10px;
}
#div {
width:40%;
float:right;
margin:10px;
}
#footer {
clear:both;
}
(CSS Div) Float . Clear. .
, CSS Float , Postion? :
#container {
width:40%;
position:relative;
margin:10px;
}
#div {
width:40%;
position:relative;
margin:10px;
}
#container #div . ? #div #container , .
Flexbox - CSS Float?
Flexbox - - , . , .
Flexbox , . flexbox , . display, inline, block inline-block flexbox flex-flow.
Flexbox?
. Flexbox . : Main axis Cross axis, Flexbox. Float Clear. , , , , , Float Position. , , , Flexbox .
, Position, Flexbox Float - . - , . , - Float (, ), - Position Flexbox.
Double Margin Bug
, , , , - . , Internet Explorer , Double Margin Bug. Margin , . , Margin . , Margin Float .
#div {
float:left;
margin-left:10px;
}
Internet Explorer 20 px . :
#div {
float:left;
margin-left:10%;
}
,
#div {
float:left;
margin-right:10px;
}
.
, Internet Explorer - , . Google Chrome Mozilla -. . , Float . .