В чем разница между Float: left vs Display: inline? Хотя каждый элемент браузера по умолчанию остается слева

Ответ 1

display:inline означает, что элемент будет "стекать" рядом с другими элементами, такими как изображения, промежутки или жирный тег. Этому противостоят элементы уровня блока (display:block), которые занимают горизонтальное пространство, подразумевают разрыв строки и не будут сидеть рядом друг с другом, например, divs, paragraph или tables.

Подумайте об этом таким образом...

<img /><img /><img />

<div />
<div />
<div />

float - это совсем другое понятие, перемещающее содержимое как влево, так и вправо. По умолчанию плавающий элемент является встроенным, а плавающие элементы будут складываться рядом друг с другом.

Все эти типы элементов являются частью обычного потока документов, что означает, что они занимают "пространство" в дизайне, который не может быть общим.

Ответ 2

Существует два типа форматирования: уровень блока и встроенный. Форматирование уровня блока выполняется с помощью модели окна, которая использует набор правил для макета.

Встроенное форматирование - это то, что обычно получает текст. Это означает, что неофициально, что вещи заполняются в линии.

Время от времени вы хотите изменить форматирование по умолчанию, которое получит элемент. Что-то, что обычно может быть отформатированным на блочном уровне, вы, возможно, захотите обработать как встроенный. Например, в предложении может отображаться div, содержащий контент, например графику ключа. Затем можно отменить форматирование с помощью display:inline. Изображения уже отображаются "Inline"

Спецификация CSS имеет удивительно простое определение для float:

Поплавок - это поле, которое сдвигается влево или вправо по текущей строке. Наиболее интересной характеристикой плавающего (или "плавающего" или "плавающего") является то, что содержимое может протекать вдоль его стороны

Таким образом, float является своего рода третьей категорией модели форматирования. Это относится к встроенным, как неформально, к макетной модели.

Ответ 3

Хотя слишком поздно, чтобы ответить, но одно из основных различий, которое я могу здесь упомянуть, это: Clear

В float элементы должны Clear ваши поплавки, но в элементах inline не требуется очистка.

Здесь вы можете увидеть живой пример: http://jsfiddle.net/K9PXF/

И это отличная статья о поплавках и очистке: http://css-tricks.com/all-about-floats/

Ответ 4

Я всегда помню, что плавает, вспоминая оригинальный <img align="left" />, который очень похож на float:left. В основном float, плавает изображение влево и обертывает текст или другой контент вокруг него. Без float он будет отображаться как часть текста.

Float работает аналогично другим инструментам документа, где вы можете обертывать текст вокруг изображения (или элемента HTML).

Ответ 5

В каждом браузере есть "поток". Тип потока эмулирует текстовый процессор в том, что элементы перемещаются слева направо, сверху вниз. Элементы, которые не подходят в конце "линии", оберните, к примеру, следующую "линию".

Элементы блока занимают полную строку. Встроенные элементы занимают столько места, сколько им нужно, поэтому другие элементы могут сидеть рядом с ними в одной строке. Если не объявлена ​​ширина, это не происходит с элементами блока.

Плавающий элемент выводит элементы из нормального потока и сдвигает его влево/вправо. Пространство, в которое был помещен объект до его размещения, пуст и сбрасывается. Если я плаваю два элемента, которые занимают больше места, чем может удерживать линия, можно перейти к следующей "строке".

@Jitendra - отображение двух пролетов inline приведет их вместе в поток, да. Плавающие два элемента, которые не занимают пространство полной линии, будут выглядеть одинаково. Тем не менее, у них определенно есть разные виды использования.

Если бы я хотел иметь поток текста вокруг изображения в абзаце, я бы плавал на изображении, не используя display:inline. Если бы я хотел создать горизонтальное меню из элементов элемента списка, я бы использовал display:inline, а не float.

Ответ 6

display: inline означает, что элемент действует как a <span> вместо <div>: т.е. он не является блоком.

Элементы, которые плавают, не находятся в нормальном потоке документа. Здесь является хорошим описанием.

ETA:

Попробуйте этот код. Если вы не видите разницу, я не могу вам помочь.

<html>
<head>
<style type="text/css">
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}

p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>

<p class='inlinel'>The is an inline paragraph with lots of words.</p>
<p class='inliner'>The is an inline paragraph with lots of words.</p>

<br/><br/>

<p class='floatl'>The is a left floated paragraph with lots of words.</p>
<p class='floatr'>The is a right floated paragraph with lots of words.</p>


</body>
</html>

Ответ 7

Обычный рабочий процесс браузера - это отображение элементов слева направо, каждый рядом с другим (если встроенные элементы)... когда строка заканчивается из-за размера веб-страницы, браузер снова запускается для отображения элементов слева направо, но на следующей строке.

Директива "float" на элементе заставляет браузер отображать элемент вне нормального рабочего процесса, в верхнем левом или верхнем правом углу веб-страницы.

Директива "display inline" заставляет элементы блока отображаться в строке, поэтому браузер управляет этими элементами, как описано выше!

В ОТНОШЕНИИ К ВАШЕМУ ВОПРОСУ: Нет! Как я писал: float: left force любой элемент (блок или не блок), помещенный на любую строку веб-страницы, который должен быть размещен в левой части веб-страницы... даже если установлено выравнивание текста направо"! Если выравнивание текста установлено влево, применяя поплавок: левые швы, которые ничего не происходят... вместо этого даже в этом случае элемент вынужден выйти из обычного рабочего процесса браузера, на самом деле, как правило, остаточная маржа сброшена!

Дисплей: inline не влияет на встроенные элементы... если для выравнивания текста (контейнера элементов) установлено значение "right", дисплей: inline не плавает влево (уведомление, Я имею в виду встроенные элементы)... потому что "display: inline" говорит браузеру только отображать элемент в той же строке обычного рабочего процесса... поэтому, если элемент является встроенным (например, ссылка элемент), это свойство не меняет своего поведения!

Итак, "display: inline" влияет только на элементы "block"! Но даже в этом случае он не плавает влево от элемента блока, но он заставляет элемент отображаться только в одной строке других встроенных элементов!

О ВАШЕМ ПРИМЕРЕ:. Div (s) являются элементами блока, нормальный рабочий процесс не является встроенным... поэтому браузер по умолчанию показывает их один ниже другого, как в этом примере:

<div class="purple" style="float:left">Link one</div> 
<div class="purple">Link two</div> 
<div class="purple">Link three</div> 
<div class="purple">Link four</div>

даже если вы применяете float: слева до первого div, швы, что ничего не происходит только потому, что он уже находится в верхнем левом углу... где он должен идти иначе!!!???

Второй пример...

<div class="red" style="float:left">Link one</div> 
<div class="red" style="float:left">Link two</div> 
<div class="red" style="float:left">Link three</div> 
<div class="red" style="float:left">Link four</div> 

Когда вы применяете float: слева к смежным div (s), заставляйте браузер отображать их из обычного рабочего процесса (Как мне грустно, элементы блока появляются по умолчанию, один под каждым другое!), плавающие div (s) с левой стороны... в этом случае один рядом друг с другом. Обратите внимание, что по мере того как я печалью, край сбрасывается... потому что div не находятся на обычной строке браузера, а только плавают слева... снова, из обычного рабочего процесса!

В самом деле, следующий пример подтверждает то, что я грустно в теории... отображение: inline заставляет браузер отображать элементы блока (div) в одной строке с учетом их поля по умолчанию и отступов:

<div class="brown" style="display:inline">Link one</div> 
<div class="brown" style="display:inline">Link two</div> 
<div class="brown" style="display:inline">Link three</div> 

Но display: inline не заставляет элементы плавать слева, а только управляться как встроенные элементы, чтобы прояснить эту концепцию, посмотрите на большую разницу между приведенными ниже примерами!

FIRST:

<div style="width:800px; text-align: right;">
    <div class="brown" style="display:inline">Link one</div> 
    <div class="brown" style="display:inline">Link two</div> 
    <div class="brown" style="display:inline">Link three</div> 
    <div class="brown" style="display:inline">Link four</div> 
</div>

ВТОРАЯ:

<div style="width:800px; text-align: right;">
    <div class="brown" style="float:left">Link one</div> 
    <div class="brown" style="float:left">Link two</div> 
    <div class="brown" style="float:left">Link three</div> 
    <div class="brown" style="float:left">Link four</div>  
</div>

О ШИРИНЕ: дисплей: inline применяется к элементу блока без фиксированной ширины, он заставляет ширину свернуть до минимального значения (ширина содержимого + дополнение), поскольку это нормальное поведение встроенного элемента.

Элемент div по умолчанию имеет ширину 100%... поэтому, когда вы применяете float: слева ширина по-прежнему установлена ​​на 100%, но плавающие слева вынуждают браузер управлять и отображать его ширина необычным способом! В этом случае нет общего правила, каждый элемент имеет другое поведение!

Ответ 8

Перейдите в w3schools и попробуйте это в своем редакторе (потому что ссылки на изображения полностью принадлежат им, или вы можете заменить изображение src из URL-адресов источника изображения) Затем измените размер окон.

Что вы заметите - это то, что в случае отображения: inline текст будет разбит на слова, а некоторые слова текста появятся в следующей строке. Хотя в случае float: оставленный весь текст будет отображаться вместе как элемент и не будет разбиваться.

Цель inline - просто отобразить все в LINE, хотя цель float - упорядочить ELEMENTS, согласовывая их с некоторыми измерениями.

<!DOCTYPE html>
<html>
<head>
<style>
.thumb 
{
float:left;
}
.thumbnail 
{
display:inline;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<br>Below are the inline elements<br>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="thumbnail">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<br><br>Below is the floating elements<br><br>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
<p class="thumb">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>